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
 }