如何为单个角度组件的依赖项创建 webpack 块

【问题标题】：How to create a webpack chunk for a dependency of a single angular component如何为单个角度组件的依赖项创建 webpack 块
【发布时间】：2018-03-07 07:49:49
【问题描述】：

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

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

如果最初没有加载供应商，是否有办法将 webpack 配置为始终将供应商拆分为自己的块？

【问题讨论】：

标签： javascript angular webpack webpack-4

【解决方案1】：

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

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

initVendors

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

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

异步供应商

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

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

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

【讨论】：