利用webpack對代碼進(jìn)行分割是懶加載的前提，懶加載就是異步調(diào)用組件，需要時(shí)候才下載（按需加載）。
為什么需要懶加載?
在單頁應(yīng)用中，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會異常的大，造成進(jìn)入首頁時(shí)，需要加載的內(nèi)容過多，延時(shí)過長，不利于用戶體驗(yàn)，而運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時(shí)。
vue開發(fā)過程中，我們會做出特別多特別多的組件，包括login,header,footer,main等等。
這樣使整個(gè)網(wǎng)站看起來就十分的龐大，當(dāng)我們在打開網(wǎng)頁的時(shí)候，突然一下子把這些所有的組件加載上來，這么多的請求全部同時(shí)開始請求，勢必會造成網(wǎng)頁打開很慢，使客戶得到的是非常差勁的體驗(yàn)。
因此，vue為我們專門設(shè)立了異步組件，通過異步組件，我們可以得到兩點(diǎn)好處：
1、 用不到的組件不會加載，因此網(wǎng)頁打開速度會很快，當(dāng)你用到這個(gè)組件的時(shí)候，才會通過異步請求進(jìn)行加載；
2、 緩存組件，通過異步加載的組件會緩存起來，當(dāng)你下一次再用到這個(gè)組件時(shí)，絲毫不會有任何的疑遲，組件很快會從緩存中加載出來。
異步組件=原理同webpack的按需加載
好處：
1）按需加載，可以節(jié)省首次加載時(shí)間，提高速度，性能優(yōu)化
2）第一次加載完成會緩存
異步組件的描述：
Vue允許將組件定義為一個(gè)異步解析（加載）組件定義的工廠函數(shù)，即Vue只在實(shí)際需要渲染組件時(shí)，才會觸發(fā)調(diào)用工廠函數(shù)，并且將結(jié)果緩存起來，用于將來再次渲染。
！！！ps:要使用異步組件，一個(gè)比較推薦的方式就是配合webpack代碼分離功能。
例子：（全局|局部）
法一：結(jié)合webpack
//1）全局：
Vue.component('component-name',function(resolve){
//require 語法告訴 webpack自動將編譯后的代碼分割成不同的塊
//這些塊將通過 Ajax 請求自動下載
require(['./my-async-componnet'],resolve)
})
//注冊全局組件名，但只有一個(gè)名字，沒有實(shí)體，相當(dāng)于空的
//當(dāng)需要這個(gè)組件時(shí)，調(diào)用上面的工廠函數(shù)，觸發(fā)webpack的異步加載模塊方法
//然后異步請求一個(gè)模塊，請求成功后，這個(gè)模塊內(nèi)容即為組件實(shí)體部分，并對應(yīng)地方渲染，加載內(nèi)容也緩存下來。
//2）局部
new Vue({
components: {
'component-name':function(resolve) {
require(['./my-component'], resolve)
}
}
})
法二：通過webpack2+es2015返回一個(gè)promise
//1）全局：
Vue.component('component-name',
（）=> import('./my-async-componnet')
)
//2） 局部：
new Vue({
components: {
'component-name': () => import('./my-async-componnet')
}
})
高級異步組件（即處理加載狀態(tài)）
工廠對象可以返回一個(gè)對象，對象里面的一些配置參數(shù)
const asyncComponent = () => ({
// 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對象)
component: import('./my-async-componnet'),
//異步加載時(shí)使用的組件（加載中的效果）
loading: loadingComponent,
//加載失敗時(shí)使用的組件
error: ErrorComponent,
//展示加載中組件的延時(shí)時(shí)間，默認(rèn)200毫秒
delay: 200,
//超時(shí)時(shí)間，超過該時(shí)間顯示加載失敗的組件
timeout: 3000
})
單文件組件+vue-router案例:
2個(gè)組件：first、second代表2個(gè)頁面, 路由文件異步組件方式：
//傳統(tǒng)寫法：import First from '@/components/First'
方法一：
const first = () => import("../components/first.vue")
const second = () => import("../components/second.vue")
方法二：
const first = resolve => require.ensure([], () => resolve( require(../components/first.vue)), 'chunkname1')
const second = resolve => require.ensure([], () => resolve( require(../components/second.vue)), 'chunkname2')
//其余配置如以往一樣
const routes = [
{
path: '/',
component: first
},
{
path: '/',
component: second
}
]
webpack中利用require.ensure()實(shí)現(xiàn)按需加載
require.ensure()(webpack異步加載|代碼分割)
- 解釋1:把js模塊獨(dú)立導(dǎo)出一個(gè)個(gè)js文件，然后使用這個(gè)模塊時(shí)，webpack會構(gòu)造這個(gè)script dom元素，加入到document.head中，由瀏覽器自動發(fā)起異步請求這個(gè)js文件，再寫個(gè)回調(diào)，去定義得到這個(gè)js文件后的業(yè)務(wù)邏輯。
- 解釋2:webpack 在編譯時(shí)，會靜態(tài)地解析代碼中的 require.ensure()，同時(shí)將模塊添加到一個(gè)分開的 chunk 當(dāng)中。這個(gè)新的 chunk 會被 webpack 通過 jsonp 來按需加載。
require.ensure這個(gè)函數(shù)是一個(gè)代碼分離的分割線，表示 回調(diào)里面的require
是我們想要進(jìn)行分割出去的，即require(’./baidumap.js’)，把baidumap.js分割出去，形成一個(gè)webpack打包的單獨(dú)js文件。當(dāng)然ensure里面也是可以寫一些同步的require的，如：
var sync = require('syncdemo.js') //下面ensure里面也用到
btn.click(function() {
require.ensure([], function() {
var map = require('./map.js') //map.js放在我們當(dāng)前目錄下
//這個(gè)不會獨(dú)立出去，因?yàn)樗呀?jīng)加載到模塊緩存中了
var sync = require('syncdemo.js')
})
})
===》ensure會把沒有使用過的require資源進(jìn)行獨(dú)立分成成一個(gè)js文件
ensure語法及參數(shù)解釋
require.ensure(dependencies: string[], callback: function(require),chunkName:string)
- 第一個(gè)參數(shù)：默認(rèn)[],放置當(dāng)前這個(gè)模塊所依賴的其他模塊。比如：假設(shè)A 和 B都是異步的，B中需要A，則B下載之前，先要下載A ：require.ensure([‘A.js’], function...),!!!!需要注意：webpack會把參數(shù)里面的依賴異步模塊和當(dāng)前的需要分離出去的異步模塊給一起打包成同一個(gè)js文件，這里可能會出現(xiàn)一個(gè)重復(fù)打包的問題， 假設(shè)A 和 B都是異步的， ensure A 中依賴B，ensure B中 依賴A，那么會生成兩個(gè)文件，都包含A和B模塊。
- 第二個(gè)參數(shù)：當(dāng)所有依賴都加載完成后，webpack會執(zhí)行這個(gè)回調(diào)函數(shù)。require對象的一個(gè)實(shí)現(xiàn)會作為一個(gè)參數(shù)傳遞給這個(gè)回調(diào)函數(shù)。因此，我們可以進(jìn)一步require（）依賴和其他模塊提供下一步的執(zhí)行。
- 第三個(gè)參數(shù)，chunkname打包后代碼塊的名字：chunk提供給這個(gè)特定的require.ensure（)的chunk的名稱。通過提供 require.ensure() 不同執(zhí)行點(diǎn)相同的名稱，我們可以保證所有的依賴都會一起放進(jìn)相同的 文件束(bundle)。
使用 vue-cli構(gòu)建的項(xiàng)目,在 默認(rèn)情況下 ,執(zhí)行 npm run build 會將所有的js代碼打包為一個(gè)整體。如果想要讓build之后的代碼更便于識別，可配置webpack代碼，單獨(dú)打包自己定義的名字（需要配置chunkFileName和publicPath）
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/', //是按需加載單獨(dú)打包出來的chunk是以publicPath為基準(zhǔn)來存放的
filename: 'build.js',
chunkFilename: 'js/[name]-[chunkhash:8].js' //最終生成的路徑和名字
}
}
參考地址：
