vue中的懶載入和按需載入

懶載入

（1）定義：懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載。（2

）非同步載入的三種表示方法：

1. 

resolve => require([url], resolve),

支援性好

2. 

() => system.import(url) , webpack2

官網上已經宣告將逐漸廢除

,不推薦使用

3. 

() => import(url), webpack2

官網推薦使用,屬於

es7範疇

,需要配合

babel

的syntax-dynamic-import

外掛程式使用。

vue中懶載入的流程：

中懶載入的各種使用地方：

1.

路由懶載入：

export default new router(,

]})

2.

元件懶載入：

components: ,   

},

3.

全域性懶載入：

vue.component('mideaheader', () => )

（1

）按需載入原因：首屏優化，第三方元件庫依賴過大

,會給首屏載入帶來很大的壓力，一般解決方式是按需求引入元件。（2

）element-ui

按需載入

element-ui

根據官方說明，先需要引入

babel-plugin-component

外掛程式，做相關配置，然後直接在元件目錄，註冊全域性元件。

1.   

安裝babel-plugin-component

外掛程式：

npm install babel-plugin-component –d

2.   

配置外掛程式，將

.babelrc

修改為：

]

],"plugins": [["component", [
]]]}

3.

引入部分元件，比如

button

和select

，那麼需要在

main.js

中寫入以下內容：

import vue from 'vue'

import  from 'element-ui'

vue.component(button.name, button)

vue.component(select.name, select)
/* 或寫為
*vue.use(button)
*vue.use(select)
*/

iview

按需求載入：

import checkbox from'iview/src/components/checkbox';

特別提醒

: 1.

按需引用仍然需要匯入樣式，即在

main.js 

或根元件執行

2.按需引用是直接引用的元件庫源**，需要借助

babel

進行編譯，以

webpack

為例：

module: ,]}

vue中的懶載入和按需載入

懶載入 1 定義 懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載。2 非同步載入的三種表示方法 resolve require url resolve 支援性好 system.import url webpack2官網上已經宣告將逐漸廢除,不推薦使用 import url webpack2官網...

vue路由懶載入,元件按需載入

懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載。在單頁應用中，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，延時過長，不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用...

vue路由按需載入（路由懶載入

目前有三種方式實現路由元件的懶載入，分別是 把路由配置，進行修改 path shopcar name shopcar component resolve require pages shopcar resolve 1 執行是開啟chrome的network，就會看到進入路由 shopcar 時，會多...