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 配置。下面是一个简单的示例:

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

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

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

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 选项来创建一个特定的规则:

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

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

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

  • 37
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小纯洁w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值