這期內容當中小編將會給大家帶來有關使用vue怎么實現代碼分割,文章內容豐富且以專業的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
一、未分割時瀏覽器加載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')
上述就是小編為大家分享的使用vue怎么實現代碼分割了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。