利用 Webpack 減少 React 應用程式大小

Nov 13, 2017 React English

開發 React 應用程式時，你可能常常會發現整個應用程式的檔案大小超乎你的預期，甚至一個簡單專案的檔案大小都會超過 3MB。要降低 React 應用程式大小有很多種優化的方式，因此我將利用本篇來介紹幾個步驟透過 Webpack 來降低 React 應用程式大小。

使用 Webpack 優化套件

Webpack 本身已經提供了一些套件讓我們可以縮小 bundle.js 檔案大小，想了解更多可以參考這裡。個人覺得使用 UglifyJsPlugin 是縮小 JS 檔案的最簡單方式。使用方式也很簡單：

plugins: [
  new webpack.optimize.UglifyJsPlugin()
]

還有更多 Webpack 優化套件供你進行更細部的設定，上面只是一個簡單的參考。

優化 CSS 檔案

除了 JS 檔案外，也別忘了減少 CSS 檔案大小也是有幫助的。要減少 CSS 檔案大小，我使用 optimize-css-assets-webpack-plugin 來處理。安裝套件：

npm install --save-dev optimize-css-assets-webpack-plugin

接著把它加入 Webpack 設定檔：

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
...
plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new OptimizeCssAssetsPlugin()
]

壓縮所有檔案

在 Web 開發中，壓縮檔案算是一個相當常見且重要的手段。儘管大部分的 Web Framework 都會提供類似的功能，但能在 Build 階段就把檔案壓縮好還是比較好的做法。所以我使用 compression-webpack-plugin 來完成。安裝方式：

npm install --save-dev compression-webpack-plugin

接著加入設定：

const CompressionPlugin = require('compression-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
...
plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new OptimizeCssAssetsPlugin(),
  new CompressionPlugin({
    asset: "[path].gz[query]",
    algorithm: "gzip",
    test: /\.js$|\.css$|\.html$/,
    threshold: 0,
    minRatio: 0.8
  })
]

經過以上步驟與重建後，你應該可以發現你的 React 應用程式大小有明顯的縮小。當然，還有更多優化的方式，有機會將在之後的文章繼續介紹。:)

你也可能會喜歡：

---