Webpack的Code Splitting

webpack的代码分割，可以将编译结果分为几个“块”输出，加载最少的js代码的同时又满足的功能需求，也适合于路由组件

常见方式：

• 多入口

多入口，便会编译出多个输出文件，但单页应用一般为一个入口。

• 配置webpack，自动将三方库打单独打包

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
  // ...
}

这样如果某三方库被多个组件引用，那么它就会被单独打包，也保证组件功能代码简洁

• 动态引入

使用import()方法，webpack会自动进行代码分割，如果想指定输出文件名，可以添加webpack注释：

import(/* webpackChunkName: 'common' */'./route1').then()