webpack打包時，會根據webpack.config.js 中url-loader中設定的limit大小來對圖片進行處理，小於limit的圖片轉化成base64格式，其餘的不做操作。對於比較大的圖片我們可以用image-webpack-loader 來壓縮圖片。 

npm install image-webpack-loader --save-dev

在 webpack.config.js 中配置：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 
 
'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',// 壓縮圖片
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

最初打包壓縮後整個包有11.4M,查了下發現是引入的蘋果字型庫就有11多M，刪除了該大包袱後，整個包資源銳減到3.24M，後再次進行圖片的壓縮，就用上面的方法，體積縮減到2.16M，將專案中png圖片線上轉換為jpg後，體積再次縮減到1.82M。

因為程式碼要放到騰訊雲上面，涉及到頻寬流量問題，我們進行了整個包資源的優化，最後使用者下載的話就只需下載1.82M的流量包即可。