代码拆分

同步代码 optimization的配置

 optimization: {
    splitChunks: {
      chunks: 'all', //代码切割的类型： async: 只切割异步代码  initial:只切割同步代码 all：两种都切割
      minSize: 30000, //切割的文件最小要求，单位kb
      maxSize: 0,//切割的文件最大要求，单位kb，超过部分会继续切分
      minChunks: 1, //最小需要切割的次数需求：至少需要切割一次,lodash 文件至少被切割一次
      maxAsyncRequests: 6,//按需加载时并行请求的最大数量。
      maxInitialRequests: 4,//入口点的最大并行请求数。
      automaticNameDelimiter: '~',//默认情况下，webpack将使用块的来源和名称生成名称（例如vendors~main.js）。此选项使您可以指定用于生成名称的定界符。
      cacheGroups: {//缓存组，同步切割时候会走该模块区分切割组
        defaultVendors: { 
          test: /[\\/]node_modules[\\/]/, //配置的模块：node_modules文件夹下的模块切割
          priority: -10 //切割优先级，当一个模块同时满足两个要求的时候，我们会根据这个值来进行分组，参数越大表示优先级越高。比如jquery这个包满足了匹配的两个条件，webpack会选择值大的打包进去/
        },
        default: { //如果没有达到上方的，就走到该默认组切割
          minChunks: 2,
          priority: -20, //切割优先级
          reuseExistingChunk: true //如果已存在切割模块，忽略这个组的切割，如果一个模块已经被打包过了，我们在打包的时候，将不在打包此模块，而是会略，直接复用之前打包的模块
        }
      }
    }
  }

同步代码里面的异步部分

1 .一些需要事件触发的代码，比如点击事件之后才做的一些操作，其实首次加载已属浪费
2 .那这些代码写的时候总不能都在里面手动写异步操作吧，这也有点麻烦啊

function getComponent() {
  return import(/* webpackChunkName: "lodash" */'loadsh').then(({ default: _ }) => {
    var elem = document.createElement('div')
    elem.innerHTML = _.join(['a','b','c'],'***')
    return elem
  })
}

document.addEventListener('click', () => {
getComponent().then(elem => {
document.body.appendChild(elem)
})
})

3 .应该有一种机制会把所有类似click的操作都做成异步加载函数，点击的时候在加载吧
4 .

异步代码

1 .自动拆分

官方默认配置:webpack会基于以下条件自动分割代码块

1 .新的代码块来被共享或者来自node_module文件夹
2 .新的代码块大于30kb
3 .按需加载代码块的请求数量应该<=5
4 .页面初始化时加载代码块的请求数量应该是<=3
5 .默认配置如下

splitChunks: {
  chunks: "async", // "initial" | "all"(推荐) | "async" (默认就是async) | 函数
  minSize: 30000,              // 最小尺寸，30000
  minChunks: 1,                // 最小 chunk ，默认1
  maxAsyncRequests: 5,         // 最大异步请求数， 默认5
  maxInitialRequests: 3,       // 最大初始化请求书，默认3
  automaticNameDelimiter: '~', // 打包分隔符
  name: true,       // 打包后的名称，此选项可接收 function
  cacheGroups: {   // 这里开始设置缓存的 chunks ，缓存组
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10,
    },
    default: {
      minChunks: 2,
      priority: -20,
      reuseExistingChunk: true, // 可设置是否重用该chunk
    }
  }
}

配置介绍

1 .chunks

1 .all:表示对所有模块进行分离优化，一般情况下都用all

2 .initial：对初始值进行分离优化。将动态导入和分动态导入的文件分别打包。但是如果一个模块被动态引入，也被非静态引入，那么这个模块将被分离两次，被分别打入到不同的文件中去

3 .async:只对异步引入的模块有效

4 .函数：可以自定义只对指定的模块进行分离优化，相当于定制优化

2 .minSize:当代码包大于这个值的时候，才会进行代码分割，默认是30kb
3 .minChunks:包被引用几次以上之后，才会进行代码分割。默认是1，默认配置的default配置，没至少被引用狼此以上才会放到这个缓存组中
4 .maxAsyncRequests:规定按需加载最大并行请求数。按需加载代码块时，并行请求的数量小于或者等于这个数量
5 .maxInitialRequests:最大初始化加载次数，防止chunk划分的过细，导致请求大量请求文件，降低性能，官方配置是3个
6 .automaticNameDelimiter:打包之后的文件名字使用什么符号连接
7 .cacheGroups:配置缓存组，要打包的文件先会被放到这个缓存组内，最后在对设置的缓存组进行打包