最近研究了vue效能優化，涉及到vue非同步元件和懶載入。一番研究得出如下的解決方案。
案例：首先是元件，建立四個元件分別命名為first、second、three和four；內容如下
? 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
first
我是第乙個頁面
second
我是第二個頁面
three
我是第三個頁面
four
我是第四個頁面
路由index.js**，非同步元件方式有兩種，**中的方案1和方案2；注意：方案1需要新增syntax-dynamic-import外掛程式
? 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import vuefrom'vue'
import vuerouterfrom'vue-router'
/*import first from '@/components/first'
import second from '@/components/second'*/
vue.use(vuerouter)
//方案1
constfirst =()=>import(/* webpackchunkname: "group-foo" */"../components/first.vue");
constsecond = ()=>import(/* webpackchunkname: "group-foo" */"../components/second.vue");
constthree = ()=>import(/* webpackchunkname: "group-fooo" */"../components/three.vue");
constfour = ()=>import(/* webpackchunkname: "group-fooo" */"../components/four.vue");
//方案2
constfirst = r => require.ensure(, () => r(require('../components/first.vue')),'chunkname1')
constsecond = r => require.ensure(, () => r(require('../components/second.vue')),'chunkname1')
constthree = r => require.ensure(, () => r(require('../components/three.vue')),'chunkname2')
constfour = r => require.ensure(, () => r(require('../components/four.vue')),'chunkname2')
//懶載入路由
constroutes = [
,
,
, ,
//這裡require元件路徑根據自己的配置引入
]
//最後建立router 對路由進行管理，它是由建構函式 new vuerouter() 建立，接受routes 引數。
constrouter =newvuerouter()
exportdefaultrouter;
最後，如果想要讓build之後的**更便於識別，配置webpack**
執行 npm run build結果
vue 路由懶載入，元件非同步載入
用於緩解首屏載入緩慢 1.vue非同步元件 vue router配置路由 使用vue的非同步元件實現按需載入 2.webpack 的 require.ensure vue router配置路由，使用webpack的require.ensure，也可實現 require.ensure 接受三個引數 語...
vue路由懶載入及元件懶載入
一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗，首屏元件載入速度更快一些，解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入，即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 1 未用懶載入，vue中路由 如下 import ...
vue路由懶載入和拓展的元件懶載入
一 為什麼要使用路由懶載入 為實現更好的客戶體驗，首屏元件載入速度更快一些，解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入，即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import，具體實現如下 vue非同步元件實現懶載入 此處省...