react 開啓gzip壓縮，打包優化

前言

本文基於 (“react”: “^16.13.1”) 版本
react官方腳手架默認是將webpack配置隱藏起來了，在進行配置之前需要將webpack給暴露出來。

1.輸入命令 npm run eject

會出現一個命令提示：這是一個單向操作，確認操作後不可逆轉/返回?
輸入 y 回車
成功之後 在項目根目錄出現 config 文件夾

2.使用 compression-webpack-plugin 插件進行壓縮

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

3.打開 config 文件夾下的 webpack.config.js 文件

4.在 module.exports 對象前面引入插件

const CompressionPlugin = require("compression-webpack-plugin");

5.開啓gzip
直接搜索 HtmlWebpackPlugin 找到 plugins 配置項
可以直接將配置項加在第一項

// compression-webpack-plugin 因爲版本問題，2.x將 asset 改爲了 filename
new CompressionPlugin({
    filename: '[path].gz[query]', // 目標資源名稱。[file] 會被替換成原資源。[path] 會被替換成原資源路徑，[query] 替換成原查詢字符串
    algorithm: 'gzip', // 算法       
    test: new RegExp('\\.(js|css)$'), // 壓縮 js 與 css
    threshold: 10240, // 只處理比這個值大的資源。按字節計算
    minRatio: 0.8 // 只有壓縮率比這個值小的資源纔會被處理
}),

6.效果圖，執行 npm run build

注：前端進行打包生成gzip文件後，nginx也需要進行配置

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當然，如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方，希望你在看到之後能夠在評論裏指出來，我會在看到之後儘快的回覆你。