CSS 处理，提取 CSS 成单独文件

运行时通过 JavaScript 动态创建 <style> 标签注入样式。这会导致：

1. 可能会导致页面闪屏：样式在 JS 加载完成后才生效，页面会先显示无样式内容，再突然渲染样式，影响用户体验。
2. 性能问题：CSS 解析被阻塞在 JS 执行之后，影响首屏渲染速度。

将 CSS 提取为独立的 .css 文件，通过 <link> 标签加载，实现

1. 并行加载：CSS 和 JS 可同时下载
2. 避免闪屏：浏览器能提前解析 CSS，确保样式在 HTML 渲染前加载完成
3. 更好的缓存：独立的 CSS 文件可被浏览器长期缓存

1. 安装包

npm i mini-css-extract-plugin -D

2. 配置

• webpack.prod.js

import MiniCssExtractPlugin from 'mini-css-extract-plugin';
// 其他引入...
export default {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从后到前
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      }
    ],
  },
  plugins: [
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ]
}

• 因为把css内容抽出来放在单独的文件中是在最后一步，所以要写在数组的第一位
• 所以如果有style-loader就替换掉，因为不需要style-loader来将css属性插入到页面中了

CSS 兼容性处理

1. 安装包

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

2. 配置

• webpack.prod.js

module: {
  rules: [
    {
      test: /\.css$/,
      // use 数组里面 Loader 执行顺序是从后到前
      use: [
        MiniCssExtractPlugin.loader, 
        "css-loader",
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: ["postcss-preset-env"],
            },
          },
        },
      ],
    },
    {
      test: /\.s[ac]ss$/,
      use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: ["postcss-preset-env"],
            },
          },
        },
        "sass-loader",
      ],
    }
  ],
}

有个注意点，兼容性loader需要在预处理loader和css-loader之间

3. 控制兼容性

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

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

想要知道更多的 browserslist 配置，查看browserslist 文档

CSS 压缩

1. 下载包

npm i css-minimizer-webpack-plugin -D

2. 配置

• webpack.prod.js
• CSS压缩是以插件的方式来运行的，所以配置在 plugins

import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
// 其他引入
export default {
  // 其他配置...
  plugins: [
    new CssMinimizerPlugin()
  ]
}