angular - Webpack 代码分割/延迟加载 : Two files generated for one dynamic import() of an npm package

Question

我有一个与 Webpack 5 捆绑在一起的 Angular 12 应用程序，但在实现 Webpack 代码分割/延迟加载时遇到一些问题。

在我的 package.json 中，我有以下依赖项:

“crypto-js”:“4.1.1”

到目前为止，在我的 Angular 代码中我使用过:

const CryptoJS = require('crypto-js');

与 Webpack 捆绑时，大约 200kb 的 crypto-js 源代码包含在我的 vendor .js 中。但是这个vendor.js现在已经变得如此巨大，以至于我想拆分我的代码并延迟加载crypto-js(以及其他，但现在我只使用crypto-js作为示例)。我只在应用程序中的某个时刻需要该第三方库，因此我开始使用:

import(/* webpackChunkName: 'crypto' */'crypto-js').then(CryptoJS => { ... });

在我需要的地方。实际上这是可行的(crypto-js 不再在vendor.js 中，并且它在我需要的地方延迟加载)，但行为非常丑陋:Webpack 生成两个文件: 文件crypto.js(由魔术注释“webpackChunkName”定义)和文件480.js。带有编号的文件包含 crypto-js 源代码，crypto.js 包含以下内容:

(self["webpackChunkclassroom"] = self["webpackChunkclassroom"] || []).push([[634],{

/***/ 42480:
/***/ (() => {

/* (ignored) */

/***/ })

}]);

当测试延迟加载时，两个文件都是从服务器加载的，这就是一切正常的原因。但我没有提出一个要求，而是提出了两个要求，这是完全没有必要的，而且非常丑陋。此外，我忘记了一切。

作为侧面标记:

当我将 crypto-js.js 从节点模块文件夹复制到我的 Web 应用程序中的 Assets 文件夹并导入此文件时:

import(/* webpackChunkName: 'crypto' */'../../assets/crypto-js.js').then(CryptoJS => { ... });

然后一切都按照我想要的方式运行。仅创建并延迟加载一个文件“crypto.js”。

但我不想在我的 Assets 文件夹中包含 JavaScript 文件(因此我必须自己保持它们最新)。我想使用 package.json 和 NPM 的优势来使我的第三方库保持最新状态。

有人可以帮我解决我的问题吗？我做错了什么？

Answer 1

我成功地让它发挥作用。

在 Webpack 配置中，我添加了以下 splitChunks 配置:

   optimization: {
       splitChunks: {
            cacheGroups: {
                defaultVendors: {
                    test: /[\\/]node_modules[\\/](?!crypto-js)/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    }

重要:

• 我在测试正则表达式中排除了 NPM 包 crypto-js
• cachedGroup 必须命名为 defaultVendors(其他都会失败)