手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得6MB+，所以現在必須進行優化。

打包結果分析

執行命令 webpack --profile --json > stats.json ，可以將打包過程的詳細信息以 json 格式記錄到文件中。依據該文件，webpack-bundle-analyzer、Webpack Chart 等分析工具會以可視化的形式展示打包過程和結果。

如果不想用這些額外工具，通過命令 webpack --display-modules --sort-modules-by size ，webpack 會在日志中按大小排序顯示所有模塊。

我在項目中，將第三方庫基本都集中打包到一個 chunk (vendors)，業務邏輯單獨一個 chunk (app)。打包總體積的大頭來自 vendors，其中antd占據大頭(3MB+)、moment占據約500KB、提取的 css 約300KB、react-dom也是500KB+，出乎意料的是 lodash 也是500KB+。

逐個擊破

設置環境變量 NODE_ENV 為 production

不少庫會按開發環境(development)和生產環境(production)提供不同的文件，主要是為了開發模式下的調試，也會因此有文件體積上的差別。用于生產環境的打包，設置其為production后，這些庫會提供最小體積的文件。

plugins: [// ...new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')}}),// ... ]

css-loader

css-loader 在 webpack 默認不開啟壓縮，需要設置 css-loader?minimize。

module: {// ...{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader?minimize'})}// ... }

大頭——antd (ant design)

因為并沒有使用 antd 的所有組件，所以按需加載是必需的。根據其文檔（按需加載 - Ant Design），需要安裝 bable 插件 babel-plugin-import ，并在 babel 配置中添加：

{// ..."plugins": [["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],// ...] }

在我配置過程中，libraryDirectory 配置的不同也會有較大影響，但按目前文檔來看貌似沒有影響，待我確認后再做記錄。

=== 2018-02-23 更新 ===

看來bable-plugin-import這幾天有更新，現在配置項 libraryDirectory 的默認值時 lib，即使用通過 require (commonjs) 引用模塊的文件。而先前我在配置的時候并沒有默認值，如果沒有顯示配置 libraryDirectory，打包結果會出現重復的內容。

采用了 es6 module 的項目建議配置 libraryDirectory 為 es，即使用通過 import (es6 module) 引用模塊的文件。這種情況打包后的體積要更小一些。

=== end ===

這里還有很重要一點，babel-plugin-import 要求 antd 不能被提取為公共模塊 vendors，否則就無法實現按需加載。尚不清楚是 babel 插件的原因，還是這個插件單獨的原因。

moment

moment 庫的體積開銷主要是 i18n 文件，配置 webpack 將用不到 i18n 文件不打包即可。

plugins: [new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/), ]

看上去很輕量的 lodash

lodash看上去就是一些工具函數，應該是很輕量的，然而一次全部加載下來要達到500KB，因此也需要按需加載。它的按需加載還比較麻煩。

lodash為每個方法單獨提供了庫，但這種方式在實際使用中并不靈活，所以這種最「干凈」的方法不建議使用。

像 antd 一樣，lodash 也有 babel 插件用于按需加載——babel-plugin-lodash

{// ..."plugins": ["lodash",// ...] }

同樣，lodash 就不能提取到公共模塊了。

最后

打包結果的體積開銷主要就是以上幾項。經過優化后，體積下降至1.5MB以內，還是很客觀的。不過 antd 依然占據大頭，后續會考慮把 antd 替換掉，畢竟用到的組件不多。

總結

以上是生活随笔為你收集整理的记一次 webpack 打包体积优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。