如何防止使用 webpack 下载未使用的节点模块块？答案

【问题标题】：How to prevent downloading unused node modules chunks with webpack?如何防止使用 webpack 下载未使用的节点模块块？
【发布时间】：2021-03-02 06:32:11
【问题描述】：

我正在开发一个大型应用程序，并决定使用 webpack 进行一些优化。

我使用了 Hackernoon 的这篇文章，我可以推荐给任何人：https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

我按照作者的指示将节点模块分隔在多个 webpack 块中：

splitChunks: {
    chunks: "all",
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
      vendor: {
        chunks: "all",
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          // get the name. E.g. node_modules/packageName/not/this/part.js
          // or node_modules/packageName
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

          // npm package names are URL-safe, but some servers don't like @ symbols
          return `_npm.${packageName.replace("@", "")}`;
        },
        enforce: true
      },
    },
  },

但是，现在所有供应商块都会在首次应用加载时下载，而不仅仅是当前页面需要（并且依赖于）的那些。

我有一些大型库，例如 lodash 和 moment，我只是在主页上不需要它们，我不希望它们被下载。我希望在用户访问依赖于它们的页面后立即下载它们。

我怎样才能做到这一点？

【问题讨论】：

标签： vue.js webpack

【解决方案1】：

发现问题。

一些不需要的共享组件，依赖于外部库，与需要的共享组件捆绑在同一个块中。

因此，下载所需的共享组件也会下载不需要的组件，它们会触发外部库的下载。

【讨论】：