vue代碼分割的實(shí)現(xiàn)(codesplit)
在vue單頁應(yīng)用中，若不做任何處理，所有vue文件會(huì)打包為一個(gè)文件，這個(gè)文件非常的大，造成網(wǎng)頁在首次進(jìn)入時(shí)比較緩慢。做了代碼分割后，會(huì)將代碼分離到不同的bundle中，然后進(jìn)行按需加載這些文件，能夠提高頁面首次進(jìn)入的速度，網(wǎng)站性能也能夠得到提升。
一、未分割時(shí)瀏覽器加載js的情況
可以看到，只有一個(gè)app.js，大小為595kb，若在實(shí)際的大型項(xiàng)目中，這個(gè)大小會(huì)更大
二、做了代碼分割后瀏覽器加載js情況
發(fā)現(xiàn)多了一個(gè)js文件，且app.js大小也變小了，下面看看點(diǎn)擊到其他頁面時(shí)加載情況
點(diǎn)到其他頁面后，頁面會(huì)依次加載當(dāng)前頁面的js
三、代碼中如何使用
該demo中使用的vue版本號(hào)為2.5.2，不同版本的使用方式可能會(huì)有所不同
1、首先，看一下路由按需加載的做法
下面是修改前的代碼
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import page1 from '@/page/page1'
import page2 from '@/page/page2'
import page3 from '@/page/page3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/page1',
name: 'page1',
component: page1
},
{
path: '/page2',
name: 'page2',
component: page2
},
{
path: '/page3',
name: 'page3',
component: page3
}
]
})
此時(shí)，我們只需將
import page1 from '@/page/page1'
改為
const page1 = () => import('@/page/page1')
這樣，我們在切換路由時(shí)便達(dá)到按需加載了，怎么樣，是不是很簡單
2、在組件中按需加載其他組件
我們還是先來看看修改前的代碼，此時(shí)引用組件的方式為傳統(tǒng)正常的方式
import vOther from '@/components/other'
export default {
components: {
vOther
}
}
我們只需做如下修改，便能達(dá)到我們想要的效果，將
import vOther from '@/components/other'
改為
const vOther = () => import('@/components/other')
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+element加入簽名效果（移動(dòng)端可用）
這篇文章主要介紹了vue+element加入簽名效果（移動(dòng)端），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue3中導(dǎo)入和使用組件幾種常見方法(.vue文件)
組件是Vue.js最強(qiáng)大的功能之一, 組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要介紹了Vue3中導(dǎo)入和使用組件幾種常見方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue單頁面在微信下只能分享落地頁的解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程(jsapi方式)
vue實(shí)現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號(hào)支付,這篇文章主要給大家介紹了關(guān)于前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue3項(xiàng)目引入阿里iconfont圖標(biāo)與字體及使用教程
Iconfont國內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫,提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目引入阿里iconfont圖標(biāo)與字體及使用教程,需要的朋友可以參考下2023-05-05
解決vue刷新頁面以后丟失store的數(shù)據(jù)問題
這篇文章主要介紹了解決vue刷新頁面以后丟失store的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)
本篇文章主要介紹了Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)，詳細(xì)的介紹了使用中會(huì)遇到的各種錯(cuò)誤，有興趣的可以了解一下。2017-04-04
Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法
在Vue項(xiàng)目中經(jīng)常需要處理文本內(nèi)容過長的情況,這篇文章主要給大家介紹了關(guān)于Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue如何動(dòng)態(tài)修改meta的title
這篇文章主要介紹了vue如何動(dòng)態(tài)修改meta的title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06