VUE 實現路由懶載入

安裝外掛程式：npm i @babel/plugin-syntax-dynamic-import

在babel.config.js檔案中配置：

plugins:[[

'component',]
,// 實現路由懶載入外掛程式
'@babel/plugin-syntax-dynamic-import'
]

原來元件載入完之後即成為區域性元件

// 匯入vue元件

// import login from '../components/login.vue'
// import home from '../components/home.vue'
// import register from '../components/register.vue'

const

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

如果還有檔案過大的，例如匯入element-ui的時候，利用import按需匯入也會使檔案過大，此時可以採取cdn在public目錄下的index.html中載入資源。

vue實現路由懶載入

一.意義 為給客戶更好的客戶體驗，首屏元件載入速度更快一些，解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入，即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 例子 未用懶載入，vue中路由 如下import vue fro...

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