时间戳

首页 > 解决方案 > 如何防止使用 webpack 下载未使用的节点模块块？

vue.js - 如何防止使用 webpack 下载未使用的节点模块块？

问题描述

我正在开发一个大型应用程序，并决定使用 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.jswebpack

解决方案

发现问题。

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

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

推荐阅读