在vue單頁應用中，若不做任何處理，所有vue文件會打包為一個文件，這個文件非常的大，造成網頁在首次進入時比較緩慢。做了代碼分割后，會將代碼分離到不同的bundle中，然后進行按需加載這些文件，能夠提高頁面首次進入的速度，網站性能也能夠得到提升。
一、未分割時瀏覽器加載js的情況
可以看到，只有一個app.js，大小為595kb，若在實際的大型項目中，這個大小會更大
二、做了代碼分割后瀏覽器加載js情況
發現多了一個js文件，且app.js大小也變小了，下面看看點擊到其他頁面時加載情況
點到其他頁面后，頁面會依次加載當前頁面的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 } ]})此時，我們只需將
import page1 from '@/page/page1'
改為
const page1 = () => import('@/page/page1')這樣，我們在切換路由時便達到按需加載了，怎么樣，是不是很簡單
2、在組件中按需加載其他組件
我們還是先來看看修改前的代碼，此時引用組件的方式為傳統正常的方式
import vOther from '@/components/other'export default { components: { vOther }}我們只需做如下修改，便能達到我們想要的效果，將
import vOther from '@/components/other'
改為
const vOther = () => import('@/components/other')以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
