Vue專案,關於路由懶載入

2021-10-09 03:11:56 字數 365 閱讀 2745

我們在進行路由對映配置時,通常會一次性將所有元件引入,進行相關配置

import home from '../components/home'

import about from '../components/about'

如果我們能把不同路由對應的元件分割成不同的**塊,然後當路由被訪問時才載入對應元件,這樣會更加高效,即路由懶載入

const home = () => import('../components/home')

const about = () => import('../components/about')

vue專案優化,路由懶載入

當打包專案時,js包會變得非常的大影響頁面載入,影響頁面載入,如果我們把不同路由對應的元件分割成不同的 塊,當路由被訪問時才載入對應的元件,這樣就更加高效了。1.安裝 babel plugin syntax dynamic import 2.配置babel plugins在babel.config....

vue路由懶載入

import vue from vue import vuerouter from vue router vue.use vuerouter var router new vuerouter routes name 登陸 path component resolve require.ensure r...

vue路由懶載入

方法一 resolve 這一種方法較常見。它主要是使用了resolve的非同步機制,用require代替了import,實現按需載入,下面是 示例 import vue from vue import router from vue router import helloworld from com...