webpack代码分离-关于webpack4.0打包代码分割优化

优化可以实现很多功能，最常见的功能有：

splitChunks用于设置代码如何打包和分割。 现在我们根据webpack官网提供的默认参数来详细解释一下各个参数配置的含义以及使用场景。 官网链接：

/**
   * webpack中实现代码分割的两种方式：
   * 1.同步代码：只需要在webpack配置文件总做optimization的配置即可
   * 2.异步代码(import)：异步代码，无需做任何配置，会自动进行代码分割，放置到新的文件中
   */
  optimization: {
    splitChunks: {
      chunks: "all",          //async异步代码分割 initial同步代码分割 all同步异步分割都开启
      minSize: 30000,         //字节 引入的文件大于30kb才进行分割
      //maxSize: 50000,         //50kb，尝试将大于50kb的文件拆分成n个50kb的文件
      minChunks: 1,           //模块至少使用次数
      maxAsyncRequests: 5,    //同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
      maxInitialRequests: 3,  //首页加载的时候引入的文件最多3个
      automaticNameDelimiter: '~', //缓存组和生成文件名称之间的连接符
      name: true,                  //缓存组里面的filename生效，覆盖默认命名
      cacheGroups: { //缓存组，将所有加载模块放在缓存里面一起分割打包
        vendors: {  //自定义打包模块
          test: /[\/]node_modules[\/]/,
          priority: -10, //优先级，先打包到哪个组里面，值越大，优先级越高
          filename: 'vendors.js',
        },
        default: { //默认打包模块
          priority: -20,
          reuseExistingChunk: true, //模块嵌套引入时，判断是否复用已经被打包的模块
          filename: 'common.js'
        }
      }
    }
  }

1. splitChunks基本配置

1.chunks：代码拆分的方式

异步代码是指将异步导入的代码模块分别打包到一个或多个文件中。 以下是异步导入的示例：

//异步加载模块
function getComponent () {
 return import(/* webpackChunkName:"lodash" */ 'lodash').then(({ default: _ }) => {
   var element = document.createElement('div')
   element.innerHTML = _.join(['Dell', ' ', 'Lee', '-'])
   return element
 })
}
getComponent().then(el => {
 document.body.appendChild(el)
})

//同步加载模块
import _ from 'lodash'  //第三方库
import test from './test.js' //业务代码
import jquery from 'jquery'  //第三方库
console.log(test.name)
var element = document.createElement('div')
element.innerHTML = _.join(['Dell', ' ', 'Lee', '-'])
document.body.appendChild(element)
console.log(jquery('div'))

2. minSize和maxSize（单位：字节）

minSize指导入模块的最小值

maxSize是指导入模块的最大值。 当导入模块的大小小于最大值时，weback会尝试根据最大值将模块划分为多个模块。 前提是模块可以划分。 例如lodash的提交小于50KB，设置maxSize:5000时，仍然打包一个文件，甚至连属性通常都不使用

3.minChunks：模块的最小使用次数

当值为2时，表示只引用一次的模块不会被拆分打包

4.maxAsyncRequests：同时加载的最大模块数

当同步导入需要拆分的模块数量超过限制时webpack代码分离，webpack 将会在以后拆分具有该限制值的模块，其他的将不被处理

5.maxInitialRequests：第一次加载时可以除以导入模块的最大值

6.automaticNameDelimiter：缓存组名与生成文件名的连接字符串

7.name：设置为true时，缓存组上面的文件名生效webpack代码分离，覆盖默认的命名方式

二。 cacheGroups 缓存组

cacheGroups: { //缓存组，将所有加载模块放在缓存里面一起分割打包
  vendors: {  //自定义打包模块
    test: /[\/]node_modules[\/]/,
    priority: -10, //优先级，先打包到哪个组里面，值越大，优先级越高
    filename: 'vendors.js',
  },
  default: { //默认打包模块
    priority: -20,
    reuseExistingChunk: true, //模块嵌套引入时，判断是否复用已经被打包的模块
    filename: 'common.js'
  }
}

1.test：正则匹配文件条件进行打包分离

2.priority：定义包装组的包装顺序优先级，值越大优先级越高

3. filename：打包模块输出的文件名，默认为缓存组名（vendors）+连接字符串（automaticNameDelimiter）+模块入口文件（main.js），例如：vendors~main.js