需求背景：在測試伺服器上，需求覺得登入時間過長

問題原因：於是看了一下專案包的體積，在4M左右，網速正常的情況下無關緊要，但還是有必要優化的~

解決問題：也是重新查閱了大量的優化體積方案，專案基於react、webpack編譯打包的。

1.首先安裝webpack的外掛webpack-bundle-analyzer，對專案包體積進行視覺化分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const config={
    plugins:[]
};
if (process.env.NODE_ENV === 'production') {
  const APlugin = new BundleAnalyzerPlugin();
  config.plugins.push(APlugin);
}
 

2.分析完模組的體積後，我們大概就對自己的專案有了一定的瞭解，然後接下來我們就需要優化體積。

----1.提取公共模組

       （ CommonsChunkPlugin）是之前版本的公共模組提取方式，webpack v4已經移除，使用SplitChunksPlugin代替  ，

        webpack官方文件對SplitChunksPlugin寫的還是很詳細的，但看著還是有點蒙，比如使用SplitChunksPlugin後還需要在entry入口設定一下公共模組嗎？一開始也是有點蒙的，嘗試後也就變得清晰了，我是如下配置：

entry:{
    vendor: [
        'echarts'
    ],
},
optimization: {
        splitChunks: {
            cacheGroups: {
              commons: {
                  name: "vendor",
                  chunks: "initial",
                  minChunks: 2
              }
            }
        }
  }

這樣公共模組會提取模組中都有的公共部分（至少兩個模組公有），也會包含你所新增的依賴（例：ecahrts）。

2.externals的使用

externals可以把你填入的依賴排除在外，打包模組的時候不進行打包你新增的依賴，然後你可以通過cdn的方式引入你的依賴（cdn地址：https://www.bootcdn.cn/）

3.UglifyjsWebpackPlugin這個就不用說了，當你的env方式是production的時候，會進行程式碼壓縮。

4.compression-webpack-plugin進行程式碼gzip壓縮

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

const config={
    ...
}


const CPlugin = new CompressionPlugin();
config.plugins.push(CPlugin);

還有一些其他的暫未使用，希望對你有所幫助