-
loader
- babel-loader
- 開啟
cacheDirectory用來緩存babel-loader的執(zhí)行結(jié)果罚屋。 - 通過
@babel/plugin-transform-runtime來減少打包的體積
- 開啟
- babel-loader
-
resolve
配置resolve橄碾，告訴webpack從哪里去找模塊
-
IgnorePlugin
忽略第三方包指定目錄，比如
moment.js的語言包 -
externals
我們可以將一些JS文件存儲(chǔ)在
CDN上(減少Webpack打包出來的js體積)，在index.html中通過script標(biāo)簽引入 -
抽離公共代碼（optimization）
即使是單頁應(yīng)用段只，同樣可以使用這個(gè)配置夺蛇，例如，打包出來的 bundle.js 體積過大副渴，我們可以將一些依賴打包成動(dòng)態(tài)鏈接庫奈附，然后將剩下的第三方依賴拆出來。這樣可以有效減小 bundle.js 的體積大小煮剧。當(dāng)然斥滤，你還可以繼續(xù)提取業(yè)務(wù)代碼的公共模塊。
- TerserWebpackPlugin壓縮js勉盅、去除console
- 通過splitChunks拆分代碼佑颇，比如
拆分公共組件模塊
-
webpack自身的優(yōu)化
- tree-shaking
- scope hosting作用域提升
-
打包速度優(yōu)化
- 多進(jìn)程打包
- thread-loader
- happypack
- 緩存提升構(gòu)建速度
- hard-source-webpack-plugin
- cache-loader
- 多進(jìn)程打包
