我们可以在路由的基础上拆分节点模块库吗？

如何解决我们可以在路由的基础上拆分节点模块库吗？

我们有关于 react 的网站，并使用 loadable 和所有 webpack 优化完成了代码拆分。一件事是关于我们正在使用 70 npm 库，这导致我们使用 splitChunks webpack 拆分了一个很大的供应商块。

如果我们有一个页面，它只使用了 70 个库中的 10 个，但是 webpack 以组块的形式以 vendor-react 和 vendor-all 等形式一次性加载所有库。

有没有办法在路由的基础上拆分节点模块，如果一个页面使用 10 个库，我们只加载 10 个库而不是一次加载整个 node_modules。

例如我们有三个页面：首页、产品列表页面、产品详细信息页面。

在 json 包中我们安装了 10 个库 例子

"react-collapsible"
"react-cookie"
"react-datepicker"
"react-day-picker"
"react-dropdown"
"react-google-maps"
"react-helmet"
"react-id-swiper"
"react-lazy-hydration"
"react-lazyload"
"react-lazyload-img"
 "redux-actions"
"redux-connect"
"redux-form"
"redux-thunk"
"serialize-javascript"
"snake-case"
"superagent"
"superagent-logger"
"swiper" 

主页： 需要3个包： “反应可折叠” “反应饼干” “反应日期选择器” 产品列表页面 需要4个包： “反应头盔” “反应id-swiper”， “反应-懒惰-水化” “反应延迟加载”

产品详细信息页面。 需要4个包裹 “序列化javascript” “蛇案” “超级经纪人” “超级代理记录器”

必须有公共库，因为供应商将为所有页面加载。

现在如果我打开主页， 只会加载首页 3 包和普通块。

不应加载产品和详细信息包。 如果我打开产品列表页面， 只会加载 4 个包和公共块。 不应加载主页包。

解决方法

是的。您可以使用 splitChunks 选项。 阅读此博客，您将有更好的理解。Route-Based Code Splitting with Loadable Components and Webpack

事实上，webpack5 为 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,};

尝试更改 splitChunks.chunks 配置。

这表明将选择哪些块进行优化。提供字符串时，有效值为 all、async 和 initial。提供 all 可能特别强大，因为这意味着即使在异步和非异步块之间也可以共享块。

让我们看一些不同设置的示例。

1. 将块设置为初始值。 main 中的包被拆分为一个供应商。 screen1 中的包被捆绑到 screen1 包中，没有为 screen1 创建供应商。

2. 将块设置为异步。同步包被捆绑到主包中，没有供应商包。异步包被捆绑到供应商中。

3. 将块设置为所有。同步包和异步包都捆绑到单独的包中。

我刚刚在一个 SPA 项目中尝试过这个。对于 ssr，可能需要更多设置。这里是 github 链接 webpack-codesplit-test。希望这会有所帮助。