WebPack进阶（Webpack和Code Splitting）

安装： npm i lodash --save 

    npm i babel-plugin-dynamic-import-webpack -D

代码分割，和webpack无关，为了提升性能
webpack中实现代码分割，两种方式:

第一种方法:同步代码： 只需要在webpack.common.js中做optimization的配置即可

第二种方法:异步代码(import): 异步代码，无需做任何配置，会自动进行代码分割，放置到新的文件中,如0.js

第一种方法：在 webpack.common.js 中

module.exports = {
    entry: {
        main: './src/index.js'
    },
    
    module: {
        rules: []
    },
    plugins: [],
+    optimization:{
+       splitChunks:{ //启动代码分割，有默认配置项
+            chunks:'all'
+        }  
+    },
    
    output: {}
}

第二种方法在 .babelrc 中：

{
    presets: [
        [
            "@babel/preset-env", {
                targets: {
                    chrome: "67",
                },
                useBuiltIns: 'usage'
            }
        ],
        // "@babel/preset-react"
    ],
    //用来转义像 return import('lodash').then()=>{} 这样的异步import语法
+    plugins: ["dynamic-import-webpack"]
}

详细内容请看官网：code-splitting

---

SplitChunksPlugin 配置参数详解

安装：npm install --save-dev @babeL/plugin-syntax-dynamic-import

在业务 index.js 中：

 function getComponent() {
    // /* webpackChunkName:"lodash" */  magic-comments
     return import(/* webpackChunkName:"lodash" */ 'lodash').then(({ default: _ }) => {
         var element = document.createElement('div');
         element.innerHTML = _.join(['1', '2'], '-');
         return element;
    })
}

//新写法
async function getComponent() {
     const { default : _ } = await import(/* webpackChunkName:"lodash" */ 'lodash')    
     var element = document.createElement('div');
     element.innerHTML = _.join(['1', '2'], '-');
     return element;
}

 getComponent().then(element => {
     document.body.appendChild(element);
 });

//点击时才加载lodash
document.addEventListener('click', () => {
   getComponent().then(element => {
     document.body.appendChild(element);
   });
})

在 .babelrc 中：

{
    presets: [
        [
            "@babel/preset-env", {
                targets: {
                    chrome: "67",
                },
                useBuiltIns: 'usage'
            }
        ],
        "@babel/preset-react"
    ],
    // 这个官方的更厉害
+    plugins: ["@babeL/plugin-syntax-dynamic-import"]
}

在 webpack.common.js 中：

module.exports = {
    entry: {
        main: './src/index.js'
    },
    
    module: {
        rules: []
    },
    plugins: [],
+    optimization:{
+       splitChunks:{ //启动代码分割,不写有默认配置项
+             chunks: 'all',//参数all/initial/async，只对所有/同步/异步进行代码分割
              minSize: 30000, //大于30kb才会对代码分割
              maxSize: 0,
              minChunks: 1,//打包生成的文件，当一个模块至少用多少次时才会进行代码分割
              maxAsyncRequests: 5,//同时加载的模块数最多是5个
              maxInitialRequests: 3,//入口文件最多3个模块会做代码分割，否则不会
              automaticNameDelimiter: '~',//文件自动生成的连接符
              name: true,
              cacheGroups:{//对同步代码走缓存组
                vendors: {
                  test: /[\\/]node_modules[\\/]/,
                  priority: -10,//谁优先级大就把打包后的文件放到哪个组
                  filename:'vendors.js'
                },
                  default: {
                  minChunks: 2,
                  priority: -20,
                  reuseExistingChunk: true,//模块已经被打包过，就不用再打包，复用之前的就      可以
                  filename:'common.js' //打包之后的文件名   
                }
        }
+        }  
+    },
    
    output: {}
}

详细请看官方文档：split-chunks-plugin