Code splitting代码分割

代码分割，其实和webpack没有太大关系

webpack中实现代码分割，两种方式

1. 对于同步代码的分割 只需要在项目中，webpack.config.js中做optimization的配置即可。
2. 对于异步代码的分割 写法使用了类似const async_code = ()=>import('../a.js'),无需做任何配置，打包时候会自动识别出import语法引入的方式，然后自动进行代码分割。
3. 较高版本的webpack的代码分割功能，底层实际继承了SplitChunksPlugin插件。 魔法注释,定义打包出来的文件名字 const async_code = ()=>import(/* webpackChunkName: test1 */'../test.js');
4. optimization配置

module.exports = {
  //optimization的配置项会从上往下走，例如有可能cacheGroups会把minSize覆盖掉，好比minSize设置成0，然后我们有引入一个3kb的test_aaa.js（我瞎写的），意思就是想把大于0字节的模块分割出来，但是其实可能test_aaa.js并没有被分割出来，因为往下走的时候，webpack发现cacheGroups的配置项里面，test_aaa.js并不在node_module包里面，所有不会将test_aaa.js分割出来;另外因为是default项为false时，它根本不知道怎么去分割了
  optimization: {
    splitChunks: {
      chunks: 'async', 
      // chunks async:对异步代码进行分割，all对同步跟异步代码都进行分割，initial：对同步代码进行分割
      minSize: 30000,
      // minSize 引入的包、或者引入的模块、或者引入的库大小大于30000字节，默认30000
      maxSize: 0,
      // maxSize若是没有配置，则还是走minSize项；但是，例如如果配置了maxSize：50，然后项目里面使用了vant组件库(假如大小1mb)，明显超过了50kb,则打包时候会尝试去将vant二次分割成20个50kb的文件出来。（但是像vant这种成熟点的库，一般都不允许被二次分割）
      minChunks: 1,
      // minChunks 代表模块至少被使用了1次的时候就会进行代码风格
      maxAsyncRequests: 5,
      // maxAsyncRequests 同时加载的模块数最多是5个，超过5个就不会进行代码分割。跟浏览器请求数目相关。
      maxInitialRequests: 3,
      // maxInitialRequests 入口文件引入模块的数目不能超过3个。
      automaticNameDelimiter: '~',
      // automaticNameDelimiter 分割出来的文件用分隔符分开，这里是~
      automaticNameMaxLength: 30,
      name: true,
      // name表示使用cacheGroups里面配置的fielname。（但是我在vue-cli3.0项目中使用filename会报错，改成name就行）
      cacheGroups: {
      // cacheGroups意思就是缓存组，例如项目中用到了多个库，例如有loadsh跟vant，那么webpack打包时候就会在打包好loadsh时候，就先将打包好的文件放进缓存组里面，不急着给打包好的loadsh起名，会等到vant也打包好的时候一起起名到一起。
        vendors: {
          // 会将一些类似于vant、lodash通过npm指令安装的库打包进vendors组里面，生成vendors~main.js文件，（这里的main是因为entry配置了入口为main。）
          test: /[\\/]node_modules[\\/]/,
          // 校验规则，一旦发现文件是从node_modules包引入的，就会集中打包进filename配置的
            vendors.js里面
          // test: /[\\/](node_modules|i18n|assets)[\\/]/,//也将i18n、assets文件夹的打包到vendors
          priority: -10,
          // priority优先级，谁越高就按谁的配置执行，像此处的-10大于default中priority：-20，所以会按照vendors的配置执行，不去执行default所配置的
          filename: 'vendors.js'
        },
        default: {
            // 可能也像vendors拥有test项，待测试。
          minChunks: 2,
          priority: -20,
          filename: 'common.js',
          reuseExistingChunk: true
          // reuseExistingChunk 意思是好比项目中有个index.js文件
          //let a import './a.js'
          //let b import './b.js'
          //并且a 模块里面其实已经引入过b模块，b模块又符合default的配置，打包时候，处理a模块时候已经会将a里面的b模块分割出来了，接着在打包到b的时候，并不会再次打包分割b，而是去看前面是否对b分割过，如果有，就复用前面已经打包分割的，不会将b模块分割放进common.js中了。
        },
        // a: {//测试，能将自定的文件打包时分割出来
        test: /iotPanelTimingComponents/,//匹配规则的路径或者文件名
        minChunks:1,//重写公用chunks的次数
        chunks: "all",
        name: "a",//重写文件名称
        enforce: true //强制生成
        },
      }
    }
  }
};