問題
單頁面應用的一個問題就是首頁加載東西過多，加載時間過長。特別在移動端，單頁面應用的首屏加載優化更是繞不開的話題。下面我會寫出我在項目中做的一些優化，希望大家能夠相互討論，共同進步。
我的項目 vue-cli3構建的，vue+vue-router+vuex，UI框架選用 element-ui，ajax方案選用 axios，服務器使用Nginx 。用到的這些技術都是現在用的比較廣泛的，看到這篇文章，我估計你和我用的技術應該差不多。
第一步：webpack-bundle-analyzer 分析
首頁我們來看看沒有經過任何優化的打包分析，vue-cli3的項目直接 vue-cli-service build --report 就會生成一個report.html，打開這個html就能看到，不是vue-cli3的項目需要自行安裝這個插件，參考鏈接， 點擊 。
如上圖所示在vendor比較大的文件有element，moment，echart，還有jquery，然后還有一些沒見過的vue-qriously這些組件，接下來我們來一步一步讓vendor變小
第二步：初步優化
1. 仔細考慮組件是否需要全局引入
在我們的main.js，我發現有很多組件被全局引入，其中有些組件只有1，2個頁面用到，這些組件不需要全部引入
import ImageComponent from 'COMMON/imageComponent'import InfiniteLoading from 'COMMON/infiniteLoading'import SearchDialog from 'COMMON/SearchDialog'import BasicTable from 'COMMON/BasicTable'import VueQriously from 'vue-qriously'Vue.use(ImageComponent)Vue.use(InfiniteLoading) // 可以去除Vue.use(SearchDialog) // 可以去除Vue.use(BasicTable) // 可以去除Vue.use(VueQriously) // 可以去除
上面一段代碼是我們main.js中的代碼，其中ImageComponent是用來處理圖片的，用到的頁面很多，其他的組件都只要較少的頁面用到，我們在main.js中刪除，移到具體的頁面中去。
2. 手動引入 ECharts 各模塊
默認引入 ECharts 是引入全部的```import * as ECharts from 'echarts' ```我們只需要部分組件，只需引入自己需要的部分。參考地址， 點擊
import VueECharts from 'vue-echarts/components/ECharts.vue'import 'echarts/lib/chart/line'import 'echarts/lib/chart/bar'import 'echarts/lib/chart/pie'import 'echarts/lib/component/title'import 'echarts/lib/component/tooltip'import 'echarts/lib/component/legend'import 'echarts/lib/component/markPoint'
3.使用更輕量級的工具庫
moment是處理時間的標桿，但是它過于龐大且默認不支持tree-shaking，而且我們的項目中只用到了moment(), format(), add(), subtract()等幾個非常簡單的方法，有點大材小用，所以我們用 date-fns 來替換它，需要什么方法直接引入就行。
經過上面的三步初步優化，我們可以看到vendor.js變小了很多，去除了moment，我們項目之前echart就是按需加載的。
第三步：CDN優化
進過上面的優化，發現 Vue 全家桶以及 ElementUI 仍然占了很大一部分 vendors 體積，這部分代碼是不變的，但會隨著每次 vendors 打包改變 hash 重新加載。我們可以使用 CDN 剔除這部分不經常變化的公共庫。我們將 vue，vue-router，vuex，axios，jquery，underscore ，使用CDN資源引入。國內的CDN服務推薦使用 BootCDN
1.首先我們在index.html中，添加CDN代碼
...<link rel="stylesheet"> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.4/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script> </body></html>
2.在vue.config.js中加入webpack配置代碼，關于webpack配置中的externals，請 參考地址
configureWebpack: { externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'element-ui': 'ELEMENT', 'axios': 'axios', 'underscore' : { commonjs: 'underscore', amd: 'underscore', root: '_' }, 'jquery': { commonjs: 'jQuery', amd: 'jQuery', root: '$' } },}3. 去除vue.use相關代碼
需要注意的是，通過 CDN 引入，在使用 VueRouter Vuex ElementUI 的時候要改下寫法。CDN會把它們掛載到window上，因此不再使用Vue.use(xxx)
也不在需import Vue from 'vue', import VueRouter from 'vue-router' 等。
剔除全家桶和Element-ui等只有，剩下的需要首次加載 vendors 就很小了。
使用 CDN 的好處有以下幾個方面
（1）加快打包速度。分離公共庫以后，每次重新打包就不會再把這些打包進 vendors 文件中。
（2）CDN減輕自己服務器的訪問壓力，并且能實現資源的并行下載。瀏覽器對 src 資源的加載是并行的(執行是按照順序的)。
第四步：檢查Nginx 是否開啟 gzip
如下圖所示，開啟了gzip后js的大小比未開啟gzip的js小2/3左右，所以如果沒開啟gzip，感覺我們做的再多意義也不大，如何看自己的項目有沒有開啟gzip，如下圖所示，開啟了gzip，在瀏覽器的控制臺Content-Encoding一欄會顯示gzip，否則沒有。Nginx如果開啟gzip，請自行搜索，或者叫服務端來開啟。
第五步：檢查路由懶加載
路由組件如果不按需加載的話，就會把所有的組件一次性打包到app.js中，導致首次加載內容過多，vue官方文檔中也有提到， 地址 。
{ name: 'vipBoxActivity', path:'vipBoxActivity', component(resolve) { require(['COMPONENTS/vipBox/vipBoxActivity/main.vue'], resolve) }},{ path: 'buyerSummary', name: 'buyerSummary', component: () => import('VIEWS/buyer/buyerSummary/index'),},上面的兩種引入組件的方法都是正確的，都能實現路由的懶加載。
最后
最后我們可以發現vendor.js的大小減少了很多。其中第一步到第三步我們項目中都沒做，第四步和第五步我們做了。如果讀者你沒做，一定要注意了。最后希望這篇文字能夠對大家有一點點幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
