入门webpack的最佳实践（基于webpack4.X 5.X）-- 运行体验优化

Jou • 2023-01-02 • 云技术社区 • 276 阅读

导语

来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。

前言

本文将从几个方面，介绍webpack如何优化打包后的运行体验，所谓运行体验，就是用户在使用我们打包后的应用时，能够快速加载页面，渲染关键信息。

splitChunks

当我们打包的模块比较大的时候，我们可以通过splitChunks来进行分包配置，从 webpack v4 开始，移除了 **CommonsChunkPlugin**，取而代之的是 **optimization.splitChunks**，先来看一下它的默认配置

module.exports = {

  //...

  optimization: {

    splitChunks: {

      chunks: 'async',

      minSize: 20000,//当导入的模块最小是多少字节才会进行代码分割

      minRemainingSize: 0,//解析见代码下面的文字说明，不用设置

      minChunks: 1,//当一个模块被导入(引用)至少多少次才对该模块进行代码分割

      maxAsyncRequests: 30,//按需加载时的最大并行请求数

      maxInitialRequests: 30,//入口点的最大并行请求数

      enforceSizeThreshold: 50000,//解析见代码下面的文字说明，不用设置

      cacheGroups: {//缓存组

        defaultVendors: {

          test: /[\\\\/]node\\_modules[\\\\/]/,

          priority: -10,//优先级

          reuseExistingChunk: true,

        },

        default: {

          minChunks: 2,

          priority: -20,

          reuseExistingChunk: true,

        },

      },

    },

  },

};

chunks

all模式下，入口文件和动态引入文件都会进行打包，作用最强大
initial 模式下，会将入口文件中的依赖包重新切割为一个新的文件,其它文件中动态引入的不会进行拆分
async（默认值）模式下，入口文件中的模块输出一个依赖包，对于动态加载的模块，默认配置会将该模块单独打包。

cacheGroups

cacheGroups是让我们自定义打包策略的地方，我们想抽取的各类公共模块，都再这个地方配置，存组可以继承和/或覆盖来自 splitChunks.\\* 的任何选项，比较常用的几个参数有

priority：优先级，只配置在缓存组的每一项，决定执行的顺序。
minChunks：最小块，即当块的数量大于等于minChunks时，才起作用
minSize：最小大小，即当抽取的公共模块的大小，大于minSize所设置的值，才起作用
maxSize：如果引入的包大小已经超过了设置的最大值，那么webpack会尝试对该包再进行分割
test：匹配规则，说明要匹配的项，这里是匹配**匹配绝对模块资源路径或 chunk 名称**
name: 打包之后的文件名，从 webpack 5 开始，不再允许将 entry 名称传递给 {cacheGroup}.test 或者为 {cacheGroup}.name 使用现有的 chunk 的名称。

比如，我们想在默认缓存组的基础上，抽离react的相关依赖，我们可以这样配置

cacheGroups: {

  // 配置提取模块的方案

  defaultVendors: {

    test: /[\\/]node\\_modules[\\/]/,

    priority: -10,

    reuseExistingChunk: true,

    name: 'vendors',

  },

  default: {

    minChunks: 2,

    priority: -20,

    reuseExistingChunk: true,

    name: 'default',

  },

  react: {

    test: /(react|react-dom)/, // 匹配chunk的名称

    name: 'react', //打包后的文件名

    chunks: 'all',

    priority: 13, // 优先级 越高则先处理

  },

},

在打包后，就会看到react的依赖包