vue專案優化,路由懶載入

2021-10-06 15:25:37 字數 460 閱讀 6058

當打包專案時,js包會變得非常的大影響頁面載入,影響頁面載入,如果我們把不同路由對應的元件分割成不同的**塊,當路由被訪問時才載入對應的元件,這樣就更加高效了。

1.安裝 @babel/plugin-syntax-dynamic-import

2.配置babel-plugins在babel.config.js裡的plugins引入包

"plugins": [

"@babel/plugin-syntax-dynamic-import"

]

3.修改引入方式按功能模組打包到一塊

const login=()=>import(/*webpackchunkname:"login"*/'../components/login.vue')

//設定相同的webpackchunkname就可以把功能模組化元件打包到一塊

Vue專案,關於路由懶載入

我們在進行路由對映配置時,通常會一次性將所有元件引入,進行相關配置 import home from components home import about from components about 如果我們能把不同路由對應的元件分割成不同的 塊,然後當路由被訪問時才載入對應元件,這樣會更加高效...

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...