# 提取单独的CSS文件以优化性能

由于 webpack 默认只会处理JS文件和生成JS文件

所有 css 文件默认被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

同时也涉及到了三个操作

  • 提取 CSS 文件 （mini-css-extract-plugin）
  • 对 CSS 文件 进行兼容处理（postcss-loader postcss postcss-preset-env）
  • 压缩 CSS 文件 （css-minimizer-webpack-plugin）

# 提取 CSS 文件 （mini-css-extract-plugin）

# 安装

npm i mini-css-extract-plugin -D
1

mini-css-extract-plugin ，它是一个webpack插件，用于将CSS文件从JavaScript文件中提取出来，生成独立的CSS文件。

# 配置webpack.config.js

// webpack.config.js

//... 其他配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入单独提取

module.exports = {
  entry: "./src/main.js",
  output: {
    //... 其他配置
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"], // css文件单独提取loader配置
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"], // css文件单独提取loader配置
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], // css文件单独提取loader配置
      },
      //... 其他配置
    ],
  },
  
  plugins: [
    //... 其他配置
    
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    
  ],
  
  mode: "production",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 对 CSS 文件 进行兼容处理（postcss-loader postcss postcss-preset-env）

# 安装

npm i postcss-loader postcss postcss-preset-env -D
1

postcss-loader：这是一个webpack loader，用于在webpack构建过程中处理CSS文件，特别是使用PostCSS进行处理。

postcss：PostCSS是一个用JavaScript工具和插件生态系统来转换CSS代码的工具。它允许你使用最新的CSS语法，并且可以通过插件来扩展其功能。

postcss-preset-env：这是一个PostCSS的插件，提供了未来CSS规范中的特性，使得你可以在现代浏览器中使用它们，同时保持向后兼容性。

# 配置CSS兼容的层级

我们可以在！！！ package.json ！！！文件中添加 browserslist 来控制样式的兼容性做到什么程度。

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}
1
2
3
4

想要知道更多的 browserslist 配置，查看browserslist 文档open in new window (opens new window)

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}
1
2
3
4

# 配置webpack.config.js

# 合并配置样式的Loaders

/**
 * @description 获取处理css样式的loaders工具配置函数, 配置了基础的loader，同时接收传参自定义loader
 * @param {Array} preProcessorList []
 * @returns
 */
const setStyleLoaders = (preProcessorList = []) => {
  return [
    // 单独提取css文件loader
    MiniCssExtractPlugin.loader,
    // 基础css-loader
    "css-loader",
    // css代码兼容处理loader配置
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    // 外部传入自定义 loader
    ...preProcessorList,
  ].filter(Boolean); // 筛选所有存在的loader
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# webpack.config.js


module.exports = {
  entry: "./src/main.js",
  output: {
    //... 其他配置
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      //... 其他配置
    ],
  },
  plugins: [
      //... 其他配置
  ],
  mode: "production",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 压缩 CSS 文件 （css-minimizer-webpack-plugin）

# 安装

npm i css-minimizer-webpack-plugin -D
1

"css-minimizer-webpack-plugin" 是一个用于 Webpack 的插件，它的作用是在 Webpack 构建过程中对 CSS 进行压缩和优化

# 配置 webpack.config.js

//... 其他配置
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    //... 其他配置
  },
  module: {
    rules: [
      //... 其他配置
    ],
  },
  plugins: [
    //... 其他配置
    // css压缩
    new CssMinimizerPlugin(),
  ],
  mode: "production",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21