VUE單頁應用首屏載入速度優化方案

單頁應用會隨著專案越大，導致首屏載入速度很慢！！！以下給出在下知道的幾種優化方案

使用cdn資源,減小伺服器頻寬壓力

路由懶載入

將一些靜態js css放到其他地方（如oss），減小伺服器壓力

按需載入三方資源，如iview,建議按需引入iview中的元件

使用nginx開啟gzip減小網路傳輸的流量大小

若首屏為登入頁，可以做成多入口，登入頁單獨分離為乙個入口

使用uglifyjs-webpack-plugin外掛程式代替webpack自帶uglifyjsplugin外掛程式

...

...

module.exports = ,

externals:,
...}

// import vue from 'vue'

// import vueresource from 'vue-resource'
// vue.use(vueresource)

const workcircle = r => require.ensure(, () => r(require('@/module/work-circle/index')), 'workcircle')

const workcirclelist = r => require.ensure(, () => r(require('@/module/work-circle/page/list')), 'workcirclelist')

const workcircle = () => import('@/module/work-circle/index')

按需引用請檢視iview官方文件iview

配置nginx，可以參考nginx開啟gzip壓縮大幅提高頁面載入速度

這裡需要配合nginx伺服器，nginx開啟gzip

webpack4.x以下使用compression-webpack-plugin外掛程式，外掛程式版本應使用1.x

webpack4.x版本以上可以使用compression-webpack-plugin 2.x

module.exports = 

}

if (config.build.productiongzip) )

)}

問題描述：專案中使用iview時，導致使用uglifyjsplugin壓縮報錯

因為iview某外掛程式中包含es6語法。然而兩個外掛程式都不支援es6壓縮

module.exports = ,

output: ,
... module: ,
],rules: [
......]}}

...

const uglifyjsplugin = require('uglifyjs-webpack-plugin')
... new uglifyjsplugin(,
compress: 
}}),
// new webpack.optimize.uglifyjsplugin(,
// sourcemap: true
// }),

Vue 單頁應用的首屏優化

對於單頁應用，要在乙個頁面上為使用者提供產品的所有功能，在這個頁面載入的時候，首先要載入大量的靜態資源，這個載入時間相對比較長。所以我們需要做一些相應的優化，減少響應時間，盡快把首屏顯示出來。1 壓縮 無論是否為單頁應用，的壓縮都是要做的。對於vue cli生成的專案，在webpack配置檔案中使用...

Vue首屏載入優化

vue首屏載入優化 單頁面應用的乙個問題就是首頁載入東西過多，載入時間過長。特別在移動端，單頁面應用的首屏載入優化更是繞不開的話題。下面我會寫出我在專案中做的一些優化，希望大家能夠相互討論，共同進步。分析載入慢問題 1.webpack bundle analyzer 分析 首頁我們來看看沒有經過任何...

SPA（單頁應用）首屏載入速度慢怎麼解決？

首屏時間 first contentful paint 指的是瀏覽器從響應使用者輸入 位址，到首屏內容渲染完成的時間，此時整個網頁不一定要全部渲染完成，但需要展示當前視窗需要的內容 首屏載入可以說是使用者體驗中最重要的環節 利用performance.timing提供的資料 通過domcontent...