解決 React+Webpack 打包體積過大

02-10

在如今的前端開發中，MV** + Webpack 已經成為標配，畢竟Webpack帶來的好處數不勝數，如模塊載入、文件自動編譯、自動尋找路徑...etc。並且自身提供了許多的插件，如HotModuleReplacementPlugin，能夠在寫完代碼後自動刷新頁面。

然而，基於NodeJS開發環境下的CommonJS規範，Webpack打包出來的js文件特別大，基本上達到幾M一個，如果項目過大，引入較多插件，能高達10多M。這還是通過 UglifyJsPlugin將js文件進行壓縮後的體積...

廢話少說～在這裡介紹幾種常用又高效的方法來幫助打包後的文件「減肥」成功：

1. UglifyJsPlugin

Webpack自帶的插件，不過一般腳手架工具如：generator-react-webpack，只會直接引用它，並不會進行過多的配置，下面代碼進行了補充：

webpack.optimize.UglifyJsPlugin({ output: { comments: false,//去掉注釋 }, compress: { warnings: false,//去掉警告 } }),

2. externals

使用externals將第三方庫如：React、React-Dom、moment、React-Router從打包後的文件中分離出來，並且引用cdn上免費的靜態資源：

externals: { react:React moment:moment ...}

Tip:注意index.html中JS文件的引用順序！

3. devtool

默認情況下，Webpack的 devtool 會設置為 source-map，會生成很大的*.js.map文件，在打包時，需要將 devtool 設置為 false 或者 cheap-module-source-map；

4. require.ensure（）

配合React-Router，會打包成多個js文件，使得頁面可以按需載入：

//產品詳情const Details = (location, cb) => { require.ensure([], require => { cb(null, require(./routes/details).default) },Details)}<Route path="/down_details" getComponent={Details} name="/產品詳情"/>

5. CompressionPlugin

通過Webpack插件 CompressionPlugin，對JS文件進行gzip壓縮，壓縮後為*.js.gz，該步驟是最見效的：

npm i compression-webpack-plugin --save-dev //通過npm安裝插件let CompressionPlugin = require("compression-webpack-plugin");//引入new CompressionPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: /.js$|.css$|.html$/, threshold: 10240, minRatio: 0.8 }),

並且需要後端人員配合，將返回的Response Headers 對 Content-Encoding 設置為 gzip;

通過以上幾個步驟，本人親測將 11M的巨無霸壓縮到100KB左右，首屏渲染速度從11s優化到1.5s。而且為了用戶界面速度優先，項目中的登錄頁面包含在一個詳情頁面中，如果將其單獨提出，目測600ms。

當然，這裡只是分享了幾個簡單的常規方法，沒有涉及到原理和思想。這裡上一張知乎上的圖來結束本文～