Webpack 通过SplitChunksPlugin实现包拆分

  1. Entry Points:你可以通过配置多个入口来实现,Webpack 会根据依赖关系自动拆分成多个 chunk。这是一个相对简单的方式,但是可能会导致一些重复代码。

  2. SplitChunksPlugin:这是一个更加强大的拆包工具,它会分析模块间的依赖关系,将多个模块公共的部分提取到单独的 chunk 中。

    SplitChunksPlugin 的配置选项用于优化代码拆分,允许更细粒度的控制代码拆分的行为。以下是一些主要的配置选项:

    (1) cacheGroups: 这是 SplitChunksPlugin 最重要的配置选项之一,可以用来定义如何将模块分配到 cache group 中(缓存组)。你可以为每个 cache group 指定一个特定的测试函数、优先级、重用已有的 chunk 等等。

    (2) chunks: 用于控制本插件影响哪些 chunk,可选值为 "initial"(只影响初始 chunk),"async"(只影响异步 chunk),"all"(同时影响上述两者)。

    (3)minSize: 用于控制拆分出的新 chunk 的最小大小,单位为字节。默认值为 30000。

    (4) minChunks: 用于控制一个模块被多少个 chunk 共享才会被拆分出来,默认值为 1。

    (5) maxAsyncRequests: 控制同时加载的异步请求数量的最大值,默认值为 6。

    (6) maxInitialRequests: 控制初始页面加载时的最大请求数量,默认值为 4。

    (7) automaticNameDelimiter: 用于生成 chunk 名称时的分隔符,默认值为 '~'。

    (8) name: 可以是一个返回 chunk 名称的函数,或者是一个固定的 chunk 名称。如果不提供,则会根据 chunk 的包和选项自动生成一个。

每个选项都可以在你的 webpack 配置文件的 optimization.splitChunks 属性下设置。这样你就可以根据你自己的需求微调代码拆分的行为,以优化你的代码包的大小和加载性能。

要配置 SplitChunksPlugin,你需要在你的 webpack 配置中添加 optimization.splitChunks 配置。下面是一个简单的示例:

javascript 复制代码
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

在这个配置文件中,splitChunks.chunks 选项被设置为 'all', 表示所有的 chunks,包括同步和异步导入的都会被分包。

要通过SplitChunksPlugin将从node_modules目录导入的模块合并到一个名为'Vendors'的chunk中,你可以通过修改webpack的配置文件中的分包策略来实现。以下是一个例子:

javascript 复制代码
module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

在这个配置中,我们创建了一个名为'vendor'的缓存组,它会匹配所有从node_modules目录导入的模块(由test: /[\\/]node_modules[\\/]/这行定义)。然后,为这些模块创建一个名为'vendors'的新chunk(由name: 'vendors'这行定义)。

此外,chunks: 'all'告诉webpack,无论模块是同步加载还是异步加载,都应该选择并放入'vendors'这个chunk中。分包策略可以在这里自行定义,chunks可以设置为all, async, initial其中的一个,分别对应全部模块,异步模块,初始加载模块。

这样,在打包的时候,Webpack就会将所有从node_modules目录导入的模块打包到一个单独的'vendors'chunk中。

3.如果你想要对一个或多个特定的包(例如前端依赖的 abc 几个体积较大的包)进行更进一步的控制,你可以使用 cacheGroups 选项来创建一个特定的规则:

javascript 复制代码
module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/](a|b|c)[\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

在这个配置中,所有从 node_modules 目录下的 a, b, c 三个包导入的模块会被合并到一个单独的 vendors chunk 中。

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

相关推荐
前端进阶者2 分钟前
天地图Marker跳一跳动画
前端
火柴就是我5 分钟前
每日见闻之Three.js 根据官方demo 理解相机位置
前端
JosieBook14 分钟前
【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程
前端·spring boot·交互
刘大猫.21 分钟前
npm ERR! cb() never called!
前端·npm·node.js·npm install·npmm err·never called
咔咔一顿操作25 分钟前
常见问题三
前端·javascript·vue.js·前端框架
上单带刀不带妹27 分钟前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
电商API大数据接口开发Cris43 分钟前
Node.js + TypeScript 开发健壮的淘宝商品 API SDK
前端·数据挖掘·api
还要啥名字1 小时前
基于elpis下 DSL有感
前端
一只毛驴1 小时前
谈谈浏览器的DOM事件-从0级到2级
前端·面试
用户8168694747251 小时前
封装ajax
前端