webpack打包 CSS分离 mini-css-extract-plugin

不念不忘少年蓝@ 2023-01-05 14:13 430阅读 0赞

## Intro ##

优化目的：应用首屏加载时间太久，按不同策略/角度分离打包文件。

## 步骤 ##

*  安装依赖  
    `npm install -D mini-css-extract-plugin`
 *  配置webpack配置文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
    module.exports = { 
      // ...
      
      plugins: [
        new HtmlWebpackPlugin({  template: "public/index.html" }),
        new MiniCssExtractPlugin({ 
          filename: "[hash:3].[name].css?v=[hash]",
          chunkFilename: "[hash:3].[id].css?v=[hash]",
          ignoreOrder: false,
          linkType: "text/css",
        }),
        // ...
      ],
    
      module: { 
        rule: [
          // 处理CSS|less资源
          { 
            test: /\.(css|less)$/,
            use: [
              // mini-css-extract-plugin 和 style-loader 是一样的功能(将JS字符串嵌入<style>标签内)，不可以同时使用。
              MiniCssExtractPlugin.loader,
              // { loader: "style-loader" }, // 利用JS字符串创建样式节点 即<style>标签
              {  loader: "css-loader" },   // CSS -> CommonJS模块
              { 
                loader: "less-loader",
                options: { 
                  lessOptions: { 
                    javascriptEnabled: true,  // 解决报错： Inline JavaScript is not enabled. Is it set in your options?
                  },
                },
              },  // 编译： less -> CSS
            ],
          },
        ],
      },
      
    };

启动项目(开发环境或生产皆可)

通过对比，可看出在配置 mini-css-extract-plugin 的前后：  
配置前：请求一个完整的JS文件。  
配置后：请求独立的css与JS文件，文件大小之和等于之前整个JS文件的大小。

未分离css时(注意勾选`Disable cache`选项)：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]

分离css之后：

![在这里插入图片描述][20210112230919891.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/0d70f7708d354feeae6ed8b1c29d3936.png
[20210112230919891.png_pic_center]: https://img-blog.csdnimg.cn/20210112230919891.png#pic_center