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之后:

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页