我们可以根据路由拆分节点模块库吗？

Question

我们有关于使用可加载和所有 webpack 优化的反应和完成代码拆分的网站。有一件事是关于我们使用 70 个 npm 库，它会导致我们使用 splitChunks webpack 拆分的大供应商块。

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

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

例如我们有三个页面 HOME Page, PRODUCT LISTING PAGE, PRODUCT DETAIL PAGE。

并且在 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 个包和公共块。 不应加载主页包。

Answer 1

是的。您可以使用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,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

尝试更改 splitChunks.chunks 配置。

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

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

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

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

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

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