如何为单个 angular 组件的依赖创建一个 webpack 块

Question

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

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

有没有办法将 webpack 配置为在最初未加载的情况下始终将供应商拆分为自己的块？

Answer 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[\/]/,
}

asyncVendors

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

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

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

如何为单个 angular 组件的依赖创建一个 webpack 块

How to create a webpack chunk for a dependency of a single angular component

javascript

angular

webpack

webpack-4