vue首屏載入優化：單頁面應用的乙個問題就是首頁載入東西過多，載入時間過長。特別在移動端，單頁面應用的首屏載入優化更是繞不開的話題。下面我會寫出我在專案中做的一些優化，希望大家能夠相互討論，共同進步。
分析載入慢問題：
1.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.
vue避免不了的問題 首屏載入優化
1.使用webpack的externals優化 在webpack.base.conf.js中新增 externals 在index.html中新增cdn鏈結 src script src script src script src script 可減小主js檔案的體積 外鏈檔案多大就可以減少多大的體...
VUE單頁應用首屏載入速度優化方案
單頁應用會隨著專案越大，導致首屏載入速度很慢！以下給出在下知道的幾種優化方案 使用cdn資源,減小伺服器頻寬壓力 路由懶載入 將一些靜態js css放到其他地方 如oss 減小伺服器壓力 按需載入三方資源，如iview,建議按需引入iview中的元件 使用nginx開啟gzip減小網路傳輸的流量大小...
Vue首屏渲染白屏優化方案
然後找到 build webpack.base.conf.js 檔案，在 module.exports 中新增以下 externals 找到 config index.js，修改為 productionsourcemap false 這個優化是兩方面的，前端將檔案打包成.gz檔案，然後通過nginx...