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

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选项)：

分离css之后：