vue專案實現路由按需載入的3種方式

2022-07-25 09:48:09 字數 1002 閱讀 1416

vue非同步元件技術 ==== 非同步載入

vue-router配置路由 , 使用vue的非同步元件技術 , 可以實現按需載入 .

但是,這種情況下乙個元件生成乙個js檔案

/* vue非同步元件技術 */

,,

元件懶載入方案二 路由懶載入(使用import)

// 下面2行**,沒有指定webpackchunkname,每個元件打包成乙個js檔案。

/* const home = () => import('@/components/home')

const index = () => import('@/components/index')

const about = () => import('@/components/about') */

// 下面2行**,指定了相同的webpackchunkname,會合併打包成乙個js檔案。 把元件按組分塊

const home = () => import(/* webpackchunkname: 'importfuncdemo' */ '@/components/home')

const index = () => import(/* webpackchunkname: 'importfuncdemo' */ '@/components/index')

const about = () => import(/* webpackchunkname: 'importfuncdemo' */ '@/components/about')

, ,

webpack提供的require.ensure()

vue-router配置路由,使用webpack的require.ensure技術,也可以實現按需載入。

這種情況下,多個路由指定相同的chunkname,會合併打包成乙個js檔案。

/* 元件懶載入方案三: webpack提供的require.ensure() */

, ,

參考:

vue專案實現路由按需載入 路由懶載入 的3種方式

vue非同步元件 es提案的import webpack的require,ensure 1 vue非同步元件技術 非同步載入 vue router配置路由 使用vue的非同步元件技術 可以實現按需載入 但是,這種情況下乙個元件生成乙個js檔案 vue非同步元件技術 元件懶載入方案二 路由懶載入 使用...

vue專案實現路由按需載入 路由懶載入 的3種方式

為什麼需要懶載入?像vue這種單頁面應用,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,時間過長,會出啊先長時間的白屏,即使做了loading也是不利於使用者體驗,而運用懶載入則可以將頁面進行劃分,需要的時候載入頁面,可以有效的分擔首頁所承擔的載...

vue專案實現路由按需載入 路由懶載入 的3種方式

vue非同步元件技術 非同步載入 vue router配置路由 使用vue的非同步元件技術 可以實現按需載入 但是,這種情況下乙個元件生成乙個js檔案 vue非同步元件技術 元件懶載入方案二 路由懶載入 使用import 下面2行 沒有指定webpackchunkname,每個元件打包成乙個js檔案...