vue路由模組懶載入

2021-08-20 18:40:28 字數 633 閱讀 8938

vue專案比較小的時候不會有太大的載入問題,但是隨著專案增大,當打包構建應用時,vendor.js變得異常的大,而且幾乎在專案每乙個頁面都需要載入這乙個js,影響頁面載入

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

以前引用方式:

import hello from '../pages/hello'

改為這樣引用:

const hello = () => import(

'../pages/hello')

webpack.prod.conf.js的配置需改為如下:

切換路由則按需載入模組:

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

Vue路由懶載入

常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 未使用懶載入 import vue from vue import router from vue router import helloworld from components helloworld 未用懶載入 vue.use...