淺談VUE單頁(yè)應(yīng)用首屏加載速度優(yōu)化方案
單頁(yè)應(yīng)用會(huì)隨著項(xiàng)目越大，導(dǎo)致首屏加載速度很慢?。。∫韵陆o出在下知道的幾種優(yōu)化方案
- 使用CDN資源,減小服務(wù)器帶寬壓力
- 路由懶加載
- 將一些靜態(tài)js css放到其他地方（如OSS），減小服務(wù)器壓力
- 按需加載三方資源，如iview,建議按需引入iview中的組件
- 使用nginx開(kāi)啟gzip減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮?/li>
- webpack開(kāi)啟gzip壓縮
- 若首屏為登錄頁(yè)，可以做成多入口，登錄頁(yè)單獨(dú)分離為一個(gè)入口
使用CDN資源,減小服務(wù)器帶寬壓力
在index.html中引入cdn資源
... <body> <div id="app"> </div> <!-- built files will be auto injected --> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> </body> ...
修改 build/webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'vue-resource': 'VueResource'
},
...
}
修改src/main.js src/router/index.js 注釋掉import引入的vue,vue-resource
// 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')
將一些靜態(tài)js css放到其他地方（如OSS），減小服務(wù)器壓力
注意這里的js文件，需要將結(jié)果拋出，然后在需要用到該js的組件中import引入
按需加載三方資源，如iview,建議按需引入iview中的組件
按需引用請(qǐng)查看iview官方文檔iview
使用nginx開(kāi)啟gzip減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮?/strong>
配置nginx，可以參考Nginx開(kāi)啟Gzip壓縮大幅提高頁(yè)面加載速度
webpack開(kāi)啟gzip壓縮
這里需要配合Nginx服務(wù)器，Nginx開(kāi)啟gzip
config/index.js中
module.exports = {
build: {
...
// 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, // 就是這里開(kāi)啟gzip,vue-cli搭建項(xiàng)目，這里默認(rèn)為false
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
}
}
build/webpack.prod.conf.js中
使用vue-cli構(gòu)建項(xiàng)目時(shí)，默認(rèn)會(huì)有這段代碼
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
})
)
}
若首屏為登錄頁(yè)，可以做成多入口，登錄頁(yè)單獨(dú)分離為一個(gè)入口
修改webpack配置
在原先只有一個(gè)入口叫app的基礎(chǔ)上，再加一個(gè)叫l(wèi)ogin的入口，指向另一個(gè)入口js文件；
既然是兩個(gè)頁(yè)面，那么原先只有一個(gè)的HtmlWebpackPlugin也需要再添加一個(gè)，并且filename和template改成登錄頁(yè)的；
HtmlWebpackPlugin默認(rèn)會(huì)把所有資源放進(jìn)html，為了去掉不需要的資源，需要在HtmlWebpackPlugin選項(xiàng)里分別添加excludeChunks: ['login']和excludeChunks: ['app']；
原先的某些CommonsChunkPlugin會(huì)導(dǎo)致報(bào)錯(cuò)，刪掉只剩下一個(gè)manifest的CommonsChunkPlugin就好。
添加登錄相關(guān)文件
添加之前配好的login入口文件，與app類(lèi)似，但是去掉登錄頁(yè)不需要的東西，如用不到的組件和樣式等；
添加login入口專(zhuān)用的router配置文件，去掉其他路由，只留下登錄頁(yè)一個(gè)就好：
只留登錄路由
添加登錄頁(yè)的html模板，也是去掉登錄里用不到的資源。
修改其他細(xì)節(jié)
登錄完不是用vue-router的push方法，而是改成直接修改location.href跳到另一個(gè)頁(yè)面；
去除原來(lái)app路由中的login；
登錄頁(yè)中可以使用隱藏的iframe等方式預(yù)加載app頁(yè)面中的數(shù)據(jù)（猜想）。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js結(jié)合bootstrap實(shí)現(xiàn)分頁(yè)控件
這篇文章主要為大家詳細(xì)介紹了Vue.js 合bootstrap實(shí)現(xiàn)分頁(yè)控件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue實(shí)現(xiàn)表單未編輯或未保存離開(kāi)彈窗提示功能
這篇文章主要介紹了vue實(shí)現(xiàn)表單未編輯或未保存離開(kāi)彈窗提示功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Vue 路由組件向app.vue主文件傳值的方式(兩種常見(jiàn)方式)
在Vue.js中,可以使用路由傳參的方式向App.vue主頁(yè)面?zhèn)鬟f數(shù)據(jù),有多種方法可以實(shí)現(xiàn)這一目標(biāo),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
Vue echarts 實(shí)現(xiàn)離線中國(guó)地圖的示例代碼(細(xì)化到省份)
這篇文章主要介紹了Vue echarts 實(shí)現(xiàn)離線中國(guó)地圖,細(xì)化到省份,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue如何局部修改Element樣式，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了解決vant中 tab欄遇到的坑 van-tabs，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue 使用高德地圖vue-amap組件過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
Vue常用API、高級(jí)API的相關(guān)總結(jié)
這篇文章主要介紹了Vue常用API、高級(jí)API的相關(guān)總結(jié)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
一步一步學(xué)Vue，這篇文章為大家分享了第一篇前端主流框架vue學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue+springboot圖片上傳和顯示的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02