webpack项目样式加载延迟 浏览器先展示无样式原始HTML如何解决

你遇到的是*无样式内容闪烁（FOUC）*问题，根源是当前配置使用style-loader会将CSS代码打包进bundle.js中，需要等待JS加载、解析执行完成后，才会动态把样式插入到页面的<style>标签中，在JS执行完成前页面就会显示无样式的原始内容。

方案1：抽离CSS为独立文件（最优先推荐） #

使用mini-css-extract-plugin将CSS从JS bundle中抽离为单独的.css文件，HtmlWebpackPlugin会自动将对应的<link>标签插入到HTML的<head>中，浏览器加载HTML时会并行请求CSS文件，无需等待JS执行即可优先加载样式。

• 安装依赖

npm install mini-css-extract-plugin --save-dev

• 修改webpack.config.js配置：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入抽离CSS的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/scripts/app.js"
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        clean: true // 可选，每次打包清空dist目录
    },
    plugins: [
        new HtmlWebpackPlugin( { template: "./src/templates/index.html" } ),
        // 实例化抽离CSS插件
        new MiniCssExtractPlugin({ filename: "styles.css" })
    ],
    module: {
        rules: [
            { 
                test: /\.css$/, 
                // 把style-loader替换为MiniCssExtractPlugin的loader
                use: [MiniCssExtractPlugin.loader, "css-loader"] 
            }
        ]
    },
    devServer: {
        static: {
            // 修正static目录指向dist，避免开发环境资源加载异常
            directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 3000,
        open: true
    }
}

方案2：内联首屏关键CSS #

如果你的全局样式体积很小，可以直接把首屏必须的基础样式写在HTML模板的<head>内嵌的<style>标签中，无需等待任何外部资源加载即可直接生效，能完全避免首屏无样式问题。

方案3：优化现有style-loader配置 #

如果不想抽离CSS，可通过两个调整缓解问题：

• 把CSS文件的import语句放在入口文件app.js的最顶部，优先执行样式加载逻辑
• 给style-loader添加injectType: "styleTag"配置，强制将样式注入到<head>顶部，提升插入优先级：

// 修改rules配置
{ test: /\.css$/, use: [
    {
        loader: "style-loader",
        options: { injectType: "styleTag" }
    }, 
    "css-loader"
] }

内容的提问来源于stack exchange，提问作者chai