vue路由懶載入之分包 分模組載入

2021-10-12 12:53:49 字數 365 閱讀 4790

如下**,

home無任何處理,直接引入

ceshi 運用官方推薦的路由懶載入,優化首頁載入的時間,這種方式引入的是乙個promise

about在路由懶載入的基礎上,進行了分包,webpackchunkname: 「name」,注意該注釋,name一樣的會被打包在一起。注釋不可省略。只有在跳到該路由的時候,才會載入

import  from "vue-router";

import home from "../views/demo/home.vue";

const routes: array= [

, ,

,];

vue路由模組懶載入

vue專案比較小的時候不會有太大的載入問題,但是隨著專案增大,當打包構建應用時,vendor.js變得異常的大,而且幾乎在專案每乙個頁面都需要載入這乙個js,影響頁面載入 如果我們能把不同路由對應的元件分割成不同的 塊,然後當路由被訪問的時候才載入對應元件,這樣就更加高效了。以前引用方式 impor...

vue路由加懶載入的方式

1 當乙個vue專案很大的時候,對於一些 暫時 用不到的元件,我們可以不進行載入,等到用到次元件時再載入。這樣可以優化spa應用首次載入白屏情況,也給使用者更好的體驗。這樣就是vue路由懶載入。2 常用的懶載入方式有兩種 即使用 es中的import 和 vue非同步元件 2.1 未使用懶載入 im...

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