1.起因

  專案打包的時候發現部分檔案過大：vender.js有400K，app.css高達1.6M。看著這個數值，瞬間凌亂。

2.優化

  2.1 優化vender.js
    是因專案的依賴 vue、vue-router、vuex、axios 造成的，可使用cdn,注意更換對應版本號

<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 

    在 build/webpack.base.conf.js 中新增如下程式碼,使其不打包進檔案

module.exports = {
    //...
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex':'Vuex'
  },
    //...
}

    去掉相關引用程式碼

// import Vue from 'vue'
// import Router from 'vue-router'
// import Vuex from 'vuex'

  2.2 優化app.css
    是因專案css中使用的圖片全部轉成了base64寫入了css中，導致app.css體積過大，首屏載入過慢，在 build/webpack.base.conf.js 中設定圖片下的url-loader的大小限制

module: {
    rules: [
        //...
        { 
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    name: utils.assetsPath('img/[name].[ext]'),
                    limit:50  //<--新增此行，單位為 b，表示將圖片大小 <=50b 的圖片轉成base64格式
                }
            },
        }
        //...
    ]}
    
// ---------------------打包後可能會出現css中的圖片路徑不對的情況，修改如下程式碼：
// build/utils.js 中找到 vue-style-loader
if (options.extract) {
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../' // <--新增此行程式碼
    })
} else {
    return ['vue-style-loader'].concat(loaders)
}
 

  2.3 啟用Gzip壓縮，一般瀏覽器都已支援.gz的資原始檔，在http請求的Request Headers 中能看到 Accept-Encoding:gzip

//config/index.js 中招到 productionGzip 設定為true
build: {
    //...
    productionGzip：true,
    productionGzipExtensions: ['js', 'css'],
}
//build/webpack.prod.conf.js 中新增以下程式碼
if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
        ),
        threshold: 10240,
        // deleteOriginalAssets:true, //刪除原始檔，不建議
        minRatio: 0.8
    })
  )
}