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
    })
  )
}

vue項目shou優化記錄