-
loader
- babel-loader
- 开启
cacheDirectory用来缓存babel-loader的执行结果。 - 通过
@babel/plugin-transform-runtime来减少打包的体积
- 开启
- babel-loader
-
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
- 多进程打包
