vue+webpack+element-ui項目打包優化速度與app.js、vendor.js打包後文件過大

2019 年 11 月 1 日
筆記

　　從開通博客到現在也沒寫什麼東西，最近幾天一直在研究vue+webpack+element-ui項目打包速度優化，想把這幾天的成果記錄下來，可能對前端牛人來說我這技術比較菜，但還是希望給有需要的朋友提供一下方便。

　　一開始項目部署到線上後第一次訪問首頁的時間是7、8秒的樣子，頁面加載太慢了自己都接受不了何況用戶。

　　主要是從一下幾步來優化的：

　　1、vue路由的加載方式

import Home from '@/components/Index'

改為

const Index = resolve => require(['@/components/Index'], resolve)

　　上面那種普通的加載方式的缺點是把所有的路由打包在一個js文件裏面頁面多的話這個文件會非常大加載的很慢。

　　下面這種方式是按需加載在訪問的時候只加載相關的路由，又被叫做（懶加載）

　　2、第三方依賴包的引入

　　　　main.js

import Vue from 'vue'  import router from './router'  import Element from 'element-ui'  import echarts from 'echarts'      Vue.use(Element)  Vue.prototype.echarts = echarts    new Vue({    el: '#app',    store,    router,    components: {App},    template: '<App/>'  })

　　　　這樣引入依賴包會把所依賴的第三方包全都打包起來從而造成打包後的 app.js和vendor.js文件過大加載的很慢，把這種方式改為CDN引入。

　　　　首先把main.js種引入的第三方包注釋掉,vue不用注釋

import Vue from 'vue'  //import router from './router'  //import Element from 'element-ui'  //import echarts from 'echarts'      //Vue.use(Element)  //Vue.prototype.echarts = echarts    new Vue({    el: '#app',    store,    router,    components: {App},    template: '<App/>'  })

　　　　在index.html中用CDN的方式引入

<!DOCTYPE html>  <html>  <head>  　　<meta charset="utf-8">  　　<meta name="viewport" content="width=device-width,initial-scale=1.0">  　　<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.11.0/theme-chalk/index.css">  　　<title></title>  </head>  <body>  <div id="app"></div>  　　<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>  　　<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>  　　<script src="https://cdn.bootcss.com/element-ui/2.11.0/index.js"></script>  　　<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>  </body>  </html>

　　　　這樣在打包的時候就不會把這些依賴包打包到裏面，vendor.js有之前的2M多變成了200多K。

　　3、打包生成壓縮包，同時不生成.amp文件

　　　　先安裝 npm install –save-dev compression-webpack-plugin

　　　　找到config/index.js 修改productionSourceMap: false,默認是true修改為false這樣打包的時候就不會生成.map文件

build: {      // Template for index.html      index: path.resolve(__dirname, '../dist/index.html'),        // Paths      assetsRoot: path.resolve(__dirname, '../dist'),      assetsSubDirectory: 'static',      assetsPublicPath: '/',        /**       * Source Maps       */        productionSourceMap: false,      // https://webpack.js.org/configuration/devtool/#production      devtool: '#source-map',        // Gzip off by default as many popular static hosts such as      // Surge or Netlify already gzip all static assets for you.      // Before setting to `true`, make sure to:      // npm install --save-dev compression-webpack-plugin      productionGzip: true,      productionGzipExtensions: ['js', 'css'],        // Run the build command with an extra argument to      // View the bundle analyzer report after build finishes:      // `npm run build --report`      // Set to `true` or `false` to always turn it on or off      bundleAnalyzerReport: process.env.npm_config_report    }  }

　　　　打包生成壓縮包修改 productionGzip:true 默認是false 修改為true，修改完成後設置webpack.prod.conf.js, 這個設置在vue-lic 2.0以上版本中默認就已經設置好了，所以就不用

　　手動設置。

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,        minRatio: 0.8      })    )  }

　　npm run build 有可能會報錯

ValidationError: Compression Plugin Invalid Options  options should NOT have additional properties

　　這個錯誤是compression-webpack-plugin的版本的問題，我安裝的版本是 @1.0.0 可以成功打包

　　打包生成壓縮包部署到線上需要後台的配合設置 nginx 開啟:gzip

　　　　設置完以上及步驟後現在的速度保持在1s左右，打包後的js文件也變得很小了。

　　　　以上是我對項目速度優化的全部步驟希望對有需要的小夥伴們有所幫助！！