记一次 webpack 打包体积优化
手頭做的項目開發(fā)得差不多了,而打包配置是一開始粗略配置的,不大的項目打包出來得6MB+,所以現(xiàn)在必須進(jìn)行優(yōu)化。
打包結(jié)果分析
執(zhí)行命令 webpack --profile --json > stats.json ,可以將打包過程的詳細(xì)信息以 json 格式記錄到文件中。依據(jù)該文件,webpack-bundle-analyzer、Webpack Chart 等分析工具會以可視化的形式展示打包過程和結(jié)果。
如果不想用這些額外工具,通過命令 webpack --display-modules --sort-modules-by size ,webpack 會在日志中按大小排序顯示所有模塊。
我在項目中,將第三方庫基本都集中打包到一個 chunk (vendors),業(yè)務(wù)邏輯單獨(dú)一個 chunk (app)。打包總體積的大頭來自 vendors,其中antd占據(jù)大頭(3MB+)、moment占據(jù)約500KB、提取的 css 約300KB、react-dom也是500KB+,出乎意料的是 lodash 也是500KB+。
逐個擊破
設(shè)置環(huán)境變量 NODE_ENV 為 production
不少庫會按開發(fā)環(huán)境(development)和生產(chǎn)環(huán)境(production)提供不同的文件,主要是為了開發(fā)模式下的調(diào)試,也會因此有文件體積上的差別。用于生產(chǎn)環(huán)境的打包,設(shè)置其為production后,這些庫會提供最小體積的文件。
plugins: [// ...new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')}}),// ... ]css-loader
css-loader 在 webpack 默認(rèn)不開啟壓縮,需要設(shè)置 css-loader?minimize。
module: {// ...{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader?minimize'})}// ... }大頭——antd (ant design)
因為并沒有使用 antd 的所有組件,所以按需加載是必需的。根據(jù)其文檔(按需加載 - Ant Design),需要安裝 bable 插件 babel-plugin-import ,并在 babel 配置中添加:
{// ..."plugins": [["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],// ...] }在我配置過程中,libraryDirectory 配置的不同也會有較大影響,但按目前文檔來看貌似沒有影響,待我確認(rèn)后再做記錄。
=== 2018-02-23 更新 ===
看來bable-plugin-import這幾天有更新,現(xiàn)在配置項 libraryDirectory 的默認(rèn)值時 lib,即使用通過 require (commonjs) 引用模塊的文件。而先前我在配置的時候并沒有默認(rèn)值,如果沒有顯示配置 libraryDirectory,打包結(jié)果會出現(xiàn)重復(fù)的內(nèi)容。
采用了 es6 module 的項目建議配置 libraryDirectory 為 es,即使用通過 import (es6 module) 引用模塊的文件。這種情況打包后的體積要更小一些。
=== end ===
這里還有很重要一點(diǎn),babel-plugin-import 要求 antd 不能被提取為公共模塊 vendors,否則就無法實現(xiàn)按需加載。尚不清楚是 babel 插件的原因,還是這個插件單獨(dú)的原因。
moment
moment 庫的體積開銷主要是 i18n 文件,配置 webpack 將用不到 i18n 文件不打包即可。
plugins: [new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/), ]看上去很輕量的 lodash
lodash看上去就是一些工具函數(shù),應(yīng)該是很輕量的,然而一次全部加載下來要達(dá)到500KB,因此也需要按需加載。它的按需加載還比較麻煩。
lodash為每個方法單獨(dú)提供了庫,但這種方式在實際使用中并不靈活,所以這種最「干凈」的方法不建議使用。
像 antd 一樣,lodash 也有 babel 插件用于按需加載——babel-plugin-lodash
{// ..."plugins": ["lodash",// ...] }同樣,lodash 就不能提取到公共模塊了。
最后
打包結(jié)果的體積開銷主要就是以上幾項。經(jīng)過優(yōu)化后,體積下降至1.5MB以內(nèi),還是很客觀的。不過 antd 依然占據(jù)大頭,后續(xù)會考慮把 antd 替換掉,畢竟用到的組件不多。
總結(jié)
以上是生活随笔為你收集整理的记一次 webpack 打包体积优化的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【工具使用系列】关于 MATLAB 电路
- 下一篇: 挨踢脱口秀精选集汇总