好處
- 開(kāi)啟 sideEffects，能真正啟用 tree shaking，移除不在使用的代碼，效果見(jiàn)附錄一
- 真正的內(nèi)容 hash 文件名，確保長(zhǎng)效緩存，不會(huì)因?yàn)橐腠樞蜃兓壬刹煌募?/li>
- cache 新增，編譯更快速
- 等等其他一些優(yōu)化（其實(shí)我也不知道還有什么了）
步驟
- 安裝最新的 webpack webpack-cli
- 升級(jí)所有 webpack 的 Plugins 和 Loaders
- 修改 webpack.dll.config.js
- 更新 webpackDevServer.config.js
整個(gè)代碼改動(dòng)詳見(jiàn) pr-4
Package 依賴包的變更
升級(jí) webpack 對(duì)應(yīng)的 plugin、loader 等到最新版。
詳見(jiàn)鏈接
Webpack 配置的變更
新增的配置
- cache add
- output.assetModuleFilename add
- output.library delete
- output.futureEmitAssets delete
- output.jsonpFunction delete
- output.globalObject delete
- module.rules[0].parser delete
- eslint-loader delete
- url-loader -> assets
- file-loader -> assets/resource
- node delete
- OptimizeCSSAssetsPlugin delete
- CssMinimizerPlugin add
- PnpWebpackPlugin delete
- ModuleScopePlugin update
- HotModuleReplacementPlugin delete
- WatchMissingNodeModulesPlugin delete
- WebpackManifestPlugin update
- IgnorePlugin update
- ESLintPlugin add
詳見(jiàn)鏈接
Webpack dev server 配置的變更
新增的配置
- static
- setupMiddlewares
- devMiddleware
移除的配置
- writeToDisk
- disableHostCheck
- before(app)
詳見(jiàn)鏈接
啟動(dòng)腳本 start.js 的變更
const serverConfig = {
...createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig,
),
host: HOST,
port,
}
// const devServer = new WebpackDevServer(compiler, serverConfig)
const devServer = new WebpackDevServer(serverConfig, compiler)
// devServer.listen(port, HOST, err => {})
devServer.startCallback(() => {})
詳見(jiàn)鏈接
參考文檔
- https://webpack.js.org/migrate/5/#upgrade-webpack-to-5
- https://webpack.js.org/blog/2020-10-10-webpack-5-release/
- https://github.com/facebook/create-react-app/releases/tag/v5.0.0
附錄一
// sideEffect 效果
// 以下為 webpack4 打包后的資源大小
File sizes after gzip:
121.49 KB build/static/js/common.d05d0b00.js
100.56 KB build/static/js/vendor.9ecccad1.js
60.49 KB build/static/css/order.7fc1215c.css
55.52 KB build/static/css/common.b0d314b9.css
48.05 KB (-1 B) build/static/js/order.f5fa0c3e.js
14.28 KB build/static/js/iconfontjs.a44f5d02.js
// 同樣的頁(yè)面在 webpack5 打包后的資源大小
File sizes after gzip:
100.06 kB (-2.92 kB) build/static/js/vendor.a0ae263b.js
98.3 kB (-26.11 kB) build/static/js/common.ef269b3b.js
59.78 kB (-2.16 kB) build/static/css/order.caefc24e.css
56.81 kB (-43 B) build/static/css/common.92c401c1.css
29.2 kB (-20.01 kB) build/static/js/order.cbc641bd.js
19.17 kB build/static/js/vendor_other.727b5c6a.js
14.56 kB (-68 B) build/static/js/iconfontjs.b7bc4526.js
2.22 kB build/static/css/vendor_other.e96e4e1f.css
// 同樣的 common.js 在開(kāi)啟 sideEffects 后會(huì)減少 26K，從 BundleAnalyzerPlugin 看是移除了 `html2canvas` 等庫(kù)
附錄二
// 例子 order.js，改變 import 一個(gè)文件的順序，分別打包：
...
import { beNum } from "../common/task_tools"
import { getTheme } from "../activity/group_buying/utils"
...
...
import { getTheme } from "../activity/group_buying/utils"
import { beNum } from "../common/task_tools"
...
// 結(jié)果如下:
// webpack4 下
order.6e9f9902.js -> order.f5fa0c3e.js
// webpack5 下
order.cbc641bd.js -> order.cbc641bd.js
webpack5-webpack4
注： 以上數(shù)據(jù)針對(duì)真實(shí)項(xiàng)目，非此 demo 代碼
