在前端做載入速度優化的方案中，有一個是對原始碼和圖片大小進行壓縮。顧名思義就是將原始碼去掉空格、註釋、換行等生產環境中的無用資訊。圖片在不影響效果的前提下進行壓縮。從而減小圖片大小，頁面在載入的時候由於載入的資源較小，實現更快載入。公司的專案是通過Vue的腳手架工具搭建的。所以用到了webpack打包工具，在我未進行優化的情況下，釋出的原始碼包大小為13.6m，進過處理之後，原始碼大小從原先的13.6m減小到現在的4.23m，優化前是優化後的三倍多一點，具體我們來看看是如何做到的。

    首先我們看看通過vuejs腳手架工具生成專案配置檔案config/index.js檔案，通過看配置我們可以看到這樣一項配置，

productionSourceMap: true

productionSourceMap: false,

為true時我們生成的程式碼目錄如下圖，通過下圖可以看見有.map為字尾的檔案。

再看看為false後生成的目錄

通過設定為true和false我們可以清楚的看到生成之後的檔案區別，為false時少了.map檔案，而配置中預設為true，所以在打包釋出時可以將此處設定為false，從而減少包的大小。我在優化的過程走到這一步，包的大小從原來的13.6減少到了8.xm。

    是否看到此處疑惑距離4.23m還有一定的距離？不要著急，下面我們來看看怎麼對圖片進行優化。通過webpack構建的專案，我們在頁面中之所以能夠正確的引用到圖片，這一切都要依託於webpack中的loader，通過檢視build下的webpack.base.conf.js檔案我們可以看到裡面配置了各種各樣的loader，其中有一個url-loader，這個是我們關心的重點。先看一下優化配置部分

預設配置：

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
}
 

修改後的配置：

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: ['url-loader?limit=10000&name='+utils.assetsPath('img/[name].[hash:7].[ext]'),
        'image-webpack-loader'
        ]
}

通過修改後的配置和預設配置對比，我們發現修改後的url-loader少了options配置且loader的值為一個數組，而將原本配置在options中的引數以我們常見的url引數的方式配置到了url-loader後面，這個地方實際上是同樣的效果。在loader中還有一個image-webpack-loader配置，這個loader就是用於圖片優化的核心，用於壓縮圖片大小。這個地方還有個注意點就是陣列中loader的順序，即最開始的圖片處理是由url-loader先處理還是image-webpack-loader處理？url-loader用於將引用的圖片正確的引用，而image-webpack-loader用於壓縮圖片大小，我們設想的是先壓縮圖片大小，然後再引用。所以配置順序是url-loader在前，image-webpack-loader在後，因為配置在後面的loader先處理，再交由配置在當前處理的loader之前的loader處理。

好了，通過這兩步的優化，我就成功的將編譯打包後的原始碼從13.6m減小到了4.23m，如果你也有同樣的需求，趕緊試試吧！

注：我這裡面提到的配置檔案為通過vue腳手架工具生成的webpack專案，至於其他webpack專案，也是可行的，修改相應的配置即可。