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

     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 }