javascript - 如何为单个 Angular 组件的依赖创建 webpack block

Question

我正在构建一个 Angular 应用程序，它包含一个组件，该组件依赖于我的 node_modules 中的一个库。我想专门为依赖项创建一个 block ，以便我的用户能够缓存它，因为组件可能会定期更改，但依赖项只会每隔几周更新一次(每当有更新时)。

我在我的 webpack 配置中尝试了各种拆分，这总是导致所有 node_modules 都在一个 block 中，或者组件及其依赖项一起在一个 block 中。

有没有一种方法可以将 webpack 配置为在最初未加载的情况下始终将 vendor 拆分为自己的 block ？

Answer 1

我通过以下配置达到了预期的效果:

optimization: {
        splitChunks: {
            cacheGroups: {
                initVendors: {
                    chunks: 'initial',
                    test: /[\\/]node_modules[\\/]/,
                },
                asyncVendors: {
                    chunks: 'async',
                    test: /[\\/]node_modules[\\/]/,
                },
            },
        },
    },

初始化 vendor

对于 chunks: 'initial'，我们建议 webpack 只对初始页面加载所需的模块进行分组。

initVendors: {
    chunks: 'initial',
    test: /[\\/]node_modules[\\/]/,
}

asyncVendors

对于 chunks: 'async'，我们建议 wepack 仅将可以加载到页面异步的模块分组，在浏览时，用于页面加载不需要的功能。

这还将把这些模块放入它们自己的 block 中，而不是将它们与使用它们的应用程序中的代码捆绑在一起。这允许对 block 进行长期缓存。

asyncVendors: {
    chunks: 'async',
    test: /[\\/]node_modules[\\/]/,
},