React-vendor过大进行切割工程

在日常开发中,webpack框架打包的时候,vendor打包出来居然有3.3mb.

势必会导致加载过程中的缓慢,如果是异步加载,则会加载更加迅速.那么如何实现vendor的切割呢

我们需要利用到webpack中的optimization属性

原先是vendor,chunks为all.将所有打包进来,不进行分割

        splitChunks: {
            chunks: 'all',
            name: 'vendor'
        },

现在将其中涉及到大型的项目,统统抽离出来

格式为

 splitChunks: {
            cacheGroups: {
                you-module-name: {
                    name: you-module-name,
                    test: 匹配规则,
                    chunks:you-chunks,
                    priority: 10, // 优先级
                    enforce: true,
                },
               ...
            },
        },

完整打包切割方案附上 

 splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'all',
                    priority: 10,
                    enforce: true,
                },
                react: {
                    name: 'react',
                    test: module => /react|redux/.test(module.context),
                    chunks: 'initial',
                    priority: 11,
                    enforce: true,
                },
                antd: {
                    name: 'antd',
                    test: (module) => {
                        return /ant/.test(module.context);
                    },
                    chunks: 'initial',
                    priority: 11,
                    enforce: true,
                },
                moment: {
                    name: 'moment',
                    test: (module) => {
                        return /moment/.test(module.context);
                    },
                    chunks: 'initial',
                    priority: 13,
                    enforce: true,
                },
            },
        },