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