webpack5优化处理CSS

Posted 2022-12-16 天界程序员

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack5优化处理CSS相关的知识，希望对你有一定的参考价值。

我们之前处理css资源只是简单的配置了一些loader，让webpack将其打包进bundle里面，但是这样对于项目加载以及用户体验不是很友好。

1. 提取CSS成单独文件

CSS 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

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

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

安装所需依赖包

npm i mini-css-extract-plugin -D

在webpack中配置插件

文件名：webpack.prod.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = 
  entry: "./src/main.js",
  output: 
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  ,
  module: 
    rules: [
      
        // 用来匹配 .css 结尾的文件
        test: /\\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      ,
      
        test: /\\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      ,
      
        test: /\\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      ,
      
        test: /\\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      ,
     // ...
    ],
  ,
  plugins: [
	// ...
    // 提取css成单独文件
    new MiniCssExtractPlugin(
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    ),
  ],
  mode: "production",
;

运行webpack打包

npm run build

观察dist目录变化情况，是否将css文件分离出来了。

2. CSS兼容处理

因为浏览器厂商众多，采用的浏览器内核各不相同，所以对CSS语法支持的程度也各不相同。

有的可能是语法不支持，有的可能是语法支持但是效果表现形态不同，反正都是因为浏览器不同所造成的。

PostCSS是一个用 javascript 工具和插件转换 CSS 代码的工具

PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

安装所需依赖包

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

在webpack中进行配置

文件名：webpack.prod.js

const path = require("path");
//...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = 
  entry: "./src/main.js",
  output: 
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  ,
  module: 
    rules: [
      
        // 用来匹配 .css 结尾的文件
        test: /\\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          
            loader: "postcss-loader",
            options: 
              postcssOptions: 
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              ,
            ,
          ,
        ],
      ,
      
        test: /\\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          
            loader: "postcss-loader",
            options: 
              postcssOptions: 
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              ,
            ,
          ,
          "less-loader",
        ],
      ,
      
        test: /\\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          
            loader: "postcss-loader",
            options: 
              postcssOptions: 
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              ,
            ,
          ,
          "sass-loader",
        ],
      ,
      
        test: /\\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          
            loader: "postcss-loader",
            options: 
              postcssOptions: 
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              ,
            ,
          ,
          "stylus-loader",
        ],
      ,
        // ...
    ],
  ,
    
  mode: "production",
;

3. 控制兼容性

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

文件名：package.json


  // 其他省略
  "browserslist": ["ie >= 8"]

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

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

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


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

last 2 version: 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
> 1%: 全球超过1%人使用的浏览器
not dead: 没有官方支持或更新超过24个月的浏览器。现在这些包括IE 11, IE Mobile 11，黑莓10，黑莓7，三星4,Opera Mobile 12.1和所有版本的百度（有道翻译的官方文档）。

4. 合并配置

由于我们每个处理样式的loader都使用到了postcss，我们这里简化一下代码

文件名：webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => 
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    
      loader: "postcss-loader",
      options: 
        postcssOptions: 
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        ,
      ,
    ,
    preProcessor,
  ].filter(Boolean);
;

module.exports = 
  entry: "./src/main.js",
  output: 
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  ,
  module: 
    rules: [
      
        // 用来匹配 .css 结尾的文件
        test: /\\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      ,
      
        test: /\\.less$/,
        use: getStyleLoaders("less-loader"),
      ,
      
        test: /\\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      ,
      
        test: /\\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      ,
        // ...
   ]
  ,
    // ...

打包观察输出变化

npm run build

5. CSS压缩

安装所需插件

npm i css-minimizer-webpack-plugin -D

这个插件使用 cssnano 优化和压缩 CSS。

在webpack中进行配置

文件名：webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// ...
module.exports = 
  entry: "./src/main.js",
  output: 
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  ,
  module: 
    rules: [
     // ...
    ],
  ,
  plugins: [
    // ...
    // css压缩
    new CssMinimizerPlugin(),
  ],

  mode: "production",
;

6.完整的生产模式配置

文件名：webapck.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => 
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    
      loader: "postcss-loader",
      options: 
        postcssOptions: 
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        ,
      ,
    ,
    preProcessor,
  ].filter(Boolean);
;

module.exports = 
  entry: "./src/main.js",
  output: 
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  ,
  module: 
    rules: [
      
        // 用来匹配 .css 结尾的文件
        test: /\\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      ,
      
        test: /\\.less$/,
        use: getStyleLoaders("less-loader"),
      ,
      
        test: /\\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      ,
      
        test: /\\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      ,
      
        test: /\\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: 
          dataUrlCondition: 
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          ,
        ,
        generator: 
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        ,
      ,
      
        test: /\\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: 
          filename: "static/media/[hash:8][ext][query]",
        ,
      ,
      
        test: /\\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      ,
    ],
  ,
  plugins: [
    new ESLintWebpackPlugin(
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    ),
    new HtmlWebpackPlugin(
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    ),
    // 提取css成单独文件
    new MiniCssExtractPlugin(
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    ),
    // css压缩
    new CssMinimizerPlugin(),
  ],
  // devServer: 
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // ,
  mode: "production",
;

运行打包命令观察效果

npm run build

以上是关于webpack5优化处理CSS的主要内容，如果未能解决你的问题，请参考以下文章

webpack配置css module，:global失效问题原因

webpack5处理图片资源

从构建进程间缓存设计谈Webpack5 优化和工作原理

干货从构建进程间缓存设计谈 Webpack5 优化和工作原理

webpack5高级优化——提升开发体验

webpack5高级优化——提升打包速度