三種懶加載和區別

像vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，

需要加載的內容過多，時間過長，會出現長時間的白屏，

即使做了loading也是不利於用戶體驗，

而運用懶加載則可以將頁面進行划分，

需要的時候加載頁面，

可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時

分為三種

1. vue異步組件
2. es提案的import()
3. webpack的require,ensure(）

一.異步組件技術就是異步加載吧

vue-router配置路由 , 使用vue的異步組件技術 , 可以實現按需加載 . 
但是,這種情況下打包時會一個組件生成一個js文件

/* vue異步組件技術 */

{ path: '/home', 
name: 'home', 
component: resolve => require(['@/components/home'],resolve)
 },

{ path: '/index',
 name: 'Index',
 component: resolve => require(['@/components/index'],resolve)
 },

{ path: '/about',
 name: 'about', 
component: resolve => require(['@/components/about'],resolve)
 }

2.路由懶加載（import）

const 組件名=() => 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')

3.webpack的require.ensure

vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需加載。 
這種情況下，多個路由指定相同的chunkName，會合並打包成一個js文件。

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

{ path: '/home', 
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
 },

{ path: '/index', 
  name: 'Index', 
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
 },

{ path: '/about', 
  name: 'about', 
  component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') 
}

 

// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
//  這種是官方推薦的寫的 按模塊划分懶加載 
//估計公司里也是這么寫的