單頁應用程序會導致項目越大，第壹個屏幕加載越慢！！！下面給出了幾種已知的優化方案。
利用CDN資源減輕服務器帶寬壓力。
路由延遲加載
把壹些靜態的js css放在其他地方(比如OSS)減輕服務器壓力。
按需加載三方資源，如iview。建議按需在iview中引入組件。
使用nginx打開gzip以減少網絡傳輸的流量
Webpack打開gzip壓縮。
如果第壹屏是登錄頁面，可以做成多個門戶，登錄頁面單獨成壹個門戶。
利用cdn資源減輕服務器帶寬壓力，將CDN資源引入index.html。
...
& ltbody & gt
& ltp id = " app " & gt
& lt/p & gt；
& lt！-生成的文件將被自動註入-& gt；
& ltscript src = "/vue/2 . 5 . 2/vue . min . js " & gt；& lt/script & gt；
& ltscript src = "/vue-router/3 . 0 . 1/vue-router . min . js " & gt；& lt/script & gt；
& ltscript src = "/vuex/3 . 0 . 1/vuex . min . js " >& lt/script & gt；
& ltscript src = "/vue-resource/1 . 5 . 1/vue-resource . min . js " & gt；& lt/script & gt；
& lt/body & gt；
...修改build/webpack.base.conf.js
模塊.導出= {
context: path.resolve(__dirname，'../'),
條目:{
應用程序:'。/src/main.js '
},
外部:{
vue': 'Vue '，
“vue路由器”:“vue路由器”，
vuex':'Vuex '，
vue-resource': 'VueResource '
},
...
}修改src/main.js src/router/index.js並註釋掉vue，vue-導入的資源。
//從“vue”導入Vue
//從“vue-resource”導入VueResource
//vue . use(vue resource)routing lazy加載const workCircle = r = & gtrequire . assure([]，()= & gtr(require(' @/module/work-circle/Index ')，' workCircle ')
const workCircleList = r = & gtrequire . assure([]，()= & gtr(require(' @/module/work-circle/page/list ')，' workcirclelist ')把壹些靜態的js css放到其他地方(比如OSS)減輕服務器的壓力。註意，這裏的js文件需要被拋出，然後導入到需要js的組件中。
按需加載三方資源，如iview。建議按需在iview中引入組件。請參考iview官方文檔iview。
使用nginx打開gzip，減少網絡傳輸的流量大小。配置nginx，參考Nginx開啟Gzip壓縮，可以大大提高頁面加載速度。
Webpack打開gzip壓縮。這裏需要和Nginx服務器合作，Nginx打開gzip。
在config/index.js中
模塊.導出= {
構建:{
...
// Gzip默認關閉許多流行的靜態主機，如
// Surge或者Netlify已經為妳gzip了所有靜態資產。
//在設置為“true”之前，請確保:
// npm安裝-保存-開發壓縮-web pack-插件
ProductionGzip: true，//這是Gzip，vue-cli building項目開始的地方，這裏的默認值是false。
productionGzipExtensions: ['js '，' css']，
//運行帶有額外參數的生成命令
//在構建完成後查看包分析器報告:
// `npm運行構建-報告'
//設置為“真”或“假”以始終打開或關閉它
bundleanalyzer report:process . env . NPM _ config _ report
}
} in }build/webpack.prod.conf.js
當使用vue-cli構建壹個項目時，默認情況下可以使用該代碼。
if(config . build . production gzip){
const compression webpackplugin = require(' compression-web pack-plugin ')
webpackConfig.plugins.push(
新的CompressionWebpackPlugin({
資產:“[路徑]”。gz[查詢]'，
算法:' gzip '，
測試:新的正則表達式(
'\\.(' +
config . build . productiongzipextensions . join(' | ')+
')$'
),
門檻:10240，
最小比率:0.8
})
)
}如果第壹屏是登錄頁面，可以做成多個入口，登錄頁面隔成壹個入口。