手頭做的項目開發(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。