Webpack + nginx + gzip 實現前端加載優化

遇到的問題

webpack打包后的chunk.js和chunk.css特別大，首屏加載需要三四十秒

解決方法

webpack對於資源進行gzip壓縮，nginx開啟gzip

實現步驟

1.項目介紹

筆者用的是CRA（create-React-app）框架，該框架對於webpack的配置進行了封裝。如果使用eject命令的話，會將封裝在 CRA 中的配置全部反編譯到當前項目，這樣用戶就可以完全取得 webpack 文件的控制權，可以隨意修改。

CRA 與其他腳手架不同的另一個地方，就是可以通過升級其中的react-scripts包來升級 CRA 的特性。比如用老版本 CRA 創建了一個項目，這個項目不具備 PWA 功能，但只要項目升級了react-scripts包的版本就可以具備 PWA 的功能，項目本身的代碼不需要做任何修改。

如果使用了eject命令的話，該過程是不可逆的，就會失去了上述優點。但是，我們可以通過react-app-rewired與customize-cra覆蓋默認配置的方法修改配置。

2.安裝react-app-rewired與customize-cra

npm install

npm install react-app-rewired customize-cra -D

修改package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

新建config-overrides.js文件

3.compression-webpack-plugin實現gzip壓縮

npm install

npm install compression-webpack-plugin -D

寫入config-overrides.js文件

const { override, fixBabelImports } = require('customize-cra');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

const addCustomize = () => config => {
  if (process.env.NODE_ENV === 'production') {
    // 關閉sourceMap
    config.devtool = false;
    // 配置打包后的文件位置
    config.output.path = __dirname + '../dist/demo/';
    config.output.publicPath = './demo';
    // 添加js打包gzip配置
    config.plugins.push(
      new CompressionWebpackPlugin({
        test: /\.js$|\.css$/,
        threshold: 10240,
      }),
    )
  }
  return config;
}

module.exports = override(
    addCustomize()
  ),
);

關於compression-webpack-plugin的詳細配置信息 官方文檔

至此，前端的配置已經完成，下面需要配置一下nginx

配置nginx

1. cd /etc/nginx

2. vim nginx.conf

3. gzip on;
   gzip_min_length 1k;
   gzip_disable msie6;
   gzip_vary on;
   gzip_proxied any;
   gzip_comp_level 6;
   gzip_buffers 16 8k;
   gzip_http_version 1.1;
   gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
   

   修改為上述內容，按esc，輸入:wq!回車（傻瓜式教學😂）

4. 重啟

   service nginx restart
   

查看結果

傳輸數據量比文件大小小了很多，加載速度從原來的三四十秒縮短為七八秒，當然還可以通過CDN加速。傳送門

這里發現了一個問題，在筆者后來的實踐中，發現似乎只需要打開nginx的gzip壓縮就可以了，而compression-webpack-plugin好像不配置也可以。歡迎在評論區討論。

參考博客：
1.https://juejin.im/post/5dedd6c8f265da33d15884bf#heading-15
2.https://www.cnblogs.com/beyonds/p/11441914.html
3.https://juejin.im/post/5c6fae50e51d45196636bf07