React 教學 - 減少 React App 大小 ( Reduce React app's size using Webpack )

開發 React 應用程式時，比較常遇到的問題就是 bundle.js 或其他檔案太大，導致頁面載入時間過長。但透過 Webpack 與一些優化技巧可以大幅減少整個應用程式大小。因此，本篇將介紹如何利用 Webpack 減少 React 應用程式大小。( If you want to read this article in English, you can visit here )



使用 Webpack 預設優化套件
Webpack 本身已經有一些預設的套件可以幫助我們縮小 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

設定如下：

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

---

使用壓縮檔案套件
這個算是常見的優化手段，將靜態資源壓縮。一般來說，後端也會提供壓縮檔案的功能，但若我們在 Build React 應用程式時就將壓縮檔建立好會更節省系統資源。所以，我們可以利用 compression-webpack-plugin 套件來達成，首先安裝：

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

接著設定 Webpack 設定檔：

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 應用程式大小，但其實還有更多的優化方式。不過，此篇先列出利用 Webpack 套件就可以輕易地達成的方法，希望有幫助到你！

---

Environment :
  ・ Unix-like System
Reference :
  ・ Webpack