vue代碼分割的實(shí)現(xiàn)(codesplit)
在vue單頁應(yīng)用中，若不做任何處理，所有vue文件會打包為一個(gè)文件，這個(gè)文件非常的大，造成網(wǎng)頁在首次進(jìn)入時(shí)比較緩慢。做了代碼分割后，會將代碼分離到不同的bundle中，然后進(jìn)行按需加載這些文件，能夠提高頁面首次進(jìn)入的速度，網(wǎng)站性能也能夠得到提升。
一、未分割時(shí)瀏覽器加載js的情況
可以看到，只有一個(gè)app.js，大小為595kb，若在實(shí)際的大型項(xiàng)目中，這個(gè)大小會更大
二、做了代碼分割后瀏覽器加載js情況
發(fā)現(xiàn)多了一個(gè)js文件，且app.js大小也變小了，下面看看點(diǎn)擊到其他頁面時(shí)加載情況
點(diǎn)到其他頁面后，頁面會依次加載當(dāng)前頁面的js
三、代碼中如何使用
該demo中使用的vue版本號為2.5.2，不同版本的使用方式可能會有所不同
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue父組件調(diào)用子組件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟
這篇文章主要介紹了如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
路由懶加載是一種優(yōu)化技術(shù)，用于延遲加載應(yīng)用程序中的路由組件，它可以提高初始加載速度并減少資源消耗，特別適用于大型單頁應(yīng)用，下面我們就來看看它的原理與使用吧2023-08-08
這篇文章主要介紹了vue中v-model雙向綁定input輸入框問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
VUE.CLI4.0配置多頁面入口的實(shí)現(xiàn)
這篇文章主要介紹了VUE.CLI4.0配置多頁面入口的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
日常業(yè)務(wù)開發(fā)中，form表單校驗(yàn)是一個(gè)很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue3如何實(shí)現(xiàn)在style中使用響應(yīng)式變量
vue3已經(jīng)內(nèi)置了這個(gè)功能啦,可以在style中使用v-bind指令綁定script模塊中的響應(yīng)式變量,這篇文章我們來講講vue是如何實(shí)現(xiàn)在style中使用script模塊中的響應(yīng)式變量,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了詳解如何在你的Vue項(xiàng)目配置vux，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript實(shí)施的安全限制,下面這篇文章主要給大家介紹了關(guān)于Vite代理如何解決跨域問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue-以文件流-blob-的形式-下載-導(dǎo)出文件操作
這篇文章主要介紹了vue-以文件流-blob-的形式-下載-導(dǎo)出文件操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08