Webpack4 splitChunks配置，代码分离逻辑

博客不知道啥时候写的了，一直在草稿箱没写完，突然感觉今年过去大半了，又没怎么写博客。写写完，有始有终

1.代码分离升级

原来项目代码分离是通过下面的配置，基于bundle-loader插件，通过router.jsx的配置进行代码分离，js文件的名字根据[name].router.jsx生成。

        {
            test: /\.router\.jsx/,
            loader: [
                'bundle-loader?lazy&name=[1]&regExp=([^\\\\\\/]*)\\.router\\.jsx',
                'babel-loader',
            ],
            exclude: /node_modules|assets/
        }

升级方案采用react-loadable + import 方式，以组件为单位进行代码分离，需要打包在一起的话，webpackChunkName配置成同一个名字就行。

    component: Loadable({
        loader: () => import(/* webpackChunkName: "name" */ 'MODULES/component/index.jsx'),
        loading
    }),

　　2.实际项目中，根据上面的配置还是会有一些问题，有些库包会比较大，如果一起打包的话会导致文件过大，所以应该利用浏览器的并发数，把大文件拆开来，webpack4主要使用的是splitChunks配置，下面是项目中的配置

splitChunks: {
            maxAsyncRequests: 6,
            cacheGroups: {
                brace: {
                    name: 'brace',
                    chunks: 'all',
                    priority: 10,
                    test: getTestFn(function(name) {
                        const reg = new RegExp(/brace/);
                        if (
                            name.indexOf('/components/ace/') !== -1 ||
                            name.indexOf('/components/sql-formatter/') !== -1 ||
                            name.indexOf('/node_modules/react-ace/') !== -1
                        ) {
                            return true;
                        }
                        return reg.test(name);
                    })
                },
                echarts: {
                    name: 'echarts',
                    chunks: 'all',
                    priority: 10,
                    test: /echarts|zrender/
                },
                libs: {
                    name: 'libs',
                    chunks: 'all',
                    priority: 9,
                    test: getTestFn(function(name) {
                        const reg = new RegExp(/babel-polyfill|\/react\/|react-dom|react-router-dom|mobx|lodash/);
                        return reg.test(name);
                    })
                },
                styles: {
                    name: 'styles',
                    test: /\.(less|css|scss)$/,
                    chunks: 'async',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true,
                    priority: 8
                },
                async: {
                    name: 'async',
                    chunks: 'async',
                    minChunks: 2,
                    reuseExistingChunk: true,
                    priority: 7
                },
                default: false,
                vendors: false
            }
        }

里面有些字段需要说明下(可能有误差，欢迎指正)

chunks："initial" 初始化，我认为就是entry的配置

"async"异步，相当于import异步拆分打包的内容

"all": 所有

priority：优先级，数值越大，越先执行

minChunks: 引用次数大于这个值进行打包

打包优化思路，

　　a.先把大的库单独打包，如代码编辑器ace,图标可视化echarts,这边我通过test设置为函数，把一些编辑器相关的也一同打包

　　b.把一些不怎么会改,升级的基础库进行打包，libs配置

　　c.把一些公共代码进行打包。async的配置。需要注意minChunks: 2，这个配置就是上面打包完成剩下的文件中，如果有超过2个地方引用的就会打包进async.js,这个配置minChunks到底填几就看实际场景了

d.vendors和default是默认配置，下面就是相关的配置，vendors是把node_modules打包一起，default是把重复代码打包，自己配置很详细的情况下，就应该禁用掉

 vendors: {
     test: /[\\/]node_modules[\\/]/,
     priority: -10
 },
 default: {
     minChunks: 2,
     priority: -20,
     reuseExistingChunk: true
 }

Webpack4 splitChunks配置，代码分离逻辑

1.代码分离升级

猜你喜欢