webpack优化

loader

• babel-loader
  • 开启cacheDirectory用来缓存babel-loader的执行结果。
  • 通过 @babel/plugin-transform-runtime来减少打包的体积

resolve

配置resolve，告诉webpack从哪里去找模块

IgnorePlugin

忽略第三方包指定目录，比如moment.js的语言包

externals

我们可以将一些JS文件存储在 CDN 上(减少 Webpack打包出来的 js 体积)，在 index.html 中通过 script 标签引入

抽离公共代码（optimization）

即使是单页应用，同样可以使用这个配置，例如，打包出来的 bundle.js 体积过大，我们可以将一些依赖打包成动态链接库，然后将剩下的第三方依赖拆出来。这样可以有效减小 bundle.js 的体积大小。当然，你还可以继续提取业务代码的公共模块。

• TerserWebpackPlugin压缩js、去除console
• 通过splitChunks拆分代码，比如拆分公共组件模块

webpack自身的优化

• tree-shaking
• scope hosting作用域提升

打包速度优化

• 多进程打包
  • thread-loader
  • happypack
• 缓存提升构建速度
  • hard-source-webpack-plugin
  • cache-loader