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

时间:2018-03-07 07:49:49

标签: javascript angular webpack webpack-4

我正在构建一个角度应用,其中包含一个依赖于node_modules中的库的单个组件。我想专门为依赖创建一个块,以便我的用户能够缓存它,因为组件可能会定期更改,但依赖关系只会每隔几周更新一次(只要它有更新)。

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

有没有办法将webpack配置为始终将供应商拆分为自己的块,如果它最初没有加载?

1 个答案:

答案 0 :(得分: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[\\/]/,
},