code splitting （代码分割）

基本概念

代码过多时，如果将所有的代码打包到一个js中（包括引入的第三方库，如lodash），当某一段业务代码更改时，页面需要重新加载打包后的js文件，影响页面性能。如果能把代码分开打包，更改代码时，只需要重新加载指定的js文件。代码分割和webpack无关，只是webpack提供了配置参数，可以简单的实现该功能。

同步代码分割

webpack.common.js

  optimization: {
    // 代码分割，提高运行性能
    splitChunks: {
      chunks: "all",
    }
  }

异步代码分割 import()

异步代码分割，不需要做任何配置，webpack会自动完成

splitChunksPlugin

在webpack4里面有一个插件 splitChunksPlugin ，这个插件直接与webpack做了捆绑，不需要安装，直接就可以拿来用了。

 optimization: {
    // 代码分割，提高运行性能
    splitChunks: {
      // 默认为async：只打包异步代码；all：同步和异步代码
      chunks: "all",
      // 引入的模块，只有大于30kb时，才会做代码分割
      minSize: 30000,
      // 引入的模块，如果大于50kb时，进行二次分割，分成多个文件
      maxSize: 50000,
      // 当模块的引入次数大于或等于1时，才会进行代码分割
      minChunks: 1,
      // 同时加载5个以上js文件时，不再进行代码分割
      maxAsyncRequests: 5,
      // 入口文件中，如果加载的模块大于3个时，不再进行代码分割
      maxInitialRequests: 3,
      // 代码分割后生成的js文件名称两个单词的连接符
      automaticNameDelimiter: '~',
      // 可重新定义打包后的文件名称，cacheGroups的vendors的filename生效
      name: true,
      // 同步代码分割打包必须配置项，缓存组，
      cacheGroups: {
        vendors: {
          // 引入的库是否在node_modules里（第三方库）
          test: /[\\/]node_modules[\\/]/,
          // 当一个文件的打包条件同时满足cacheGroups中的条件时，选用priority（优先级）大的规则
          priority: -10,
          filename: "vendors.js"
        },
        default: {
          minChunks: 2,
          priority: -20,
          // 如果a模块引用的模块b已经打包过，再打包时b模块不再进行打包，直接使用
          reuseExistingChunk: true,
          filename: "common.js"
        }
      }
    }
  }