webpack壓縮圖片之項目資源優化

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的流量包便可。

 通過業務邏輯疊加，咱們打包後代碼到了2M了，咱們老大須要check個人包代碼，發現裏面有map文件沒有去掉，而後我又進行了map文件的清理：

運行 cnpm run build 開始打包後會在項目目錄下自動建立dist目錄，打包好的文件都在其中 
解決辦法：去src/config/index.js中改一個參數： 
productionSourceMap:false 
把這個改成false。否則在最終打包的文件中會出現一些map文件

map文件的做用：項目打包後，代碼都是通過壓縮加密的，若是運行時報錯，輸出的錯誤信息沒法準確得知是哪裏的代碼報錯。 
有了map就能夠像未加密的代碼同樣，準確的輸出是哪一行哪一列有錯。

而後2M多的項目去掉map文件打包後僅剩775K，不足1M的量，忽然發現之前我寫的項目包應該都是蠻大的吧[捂臉]，對不起使用我寫的項目的用戶鴨，真是抱歉啊，沒有真實爲着用戶着想，個人鍋！

 

 

【完】

進一寸有一寸的欣喜