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

Question

I am building an angular app, which contains a single component which depends on a library in my node_modules. I would like to create a single chunk specifically for the dependency so that my users are able to cache it, as the component may change regularly, but the dependency will only be updated every few weeks (whenever it has an update).

I have tried various splits in my webpack config, which always resulted in either all node_modules in a single chunk, or the the component and its dependency together in one chunk.

Is there a way to configure webpack to always split a vendor into its own chunk if it is not loaded initially?

Answer 1

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

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

初始化供应商

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

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

异步供应商

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

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

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