webpack代碼分割和懶加載

代碼分割：

分離業務代碼 和 第三方依賴

分離業務代碼 和業務公共代碼 和第三方依賴

分離首次加載 和 訪問加載後的代碼

經常使用的：require.ensure()

   []:denpendencies

    callback

     errorCallback

    chunkName 

首先第一步此次是代碼分割和上節有變化，咱們把配置變了。而後來看看，這和前面也沒啥關係，新的一節

    

var webpack=require('webpack')
var path=require('path')

module.exports={
entry:{
'pageA':'./src/pageA',
// 'pageB':'./src/pageB',
// 'vendor':['lodash']

},
output:{
path:path.resolve(__dirname, './dist'),
filename:'[name].bundle.js',
    chunkFilename: "[name].chunk.js"
},

 

代碼長成這樣，而後打包的話。pagea有的依賴有：

import './subPageA'
import './subPageB'
import * as _ from 'lodash'
export default 'pageA'

一次性打包的話依賴很是多的文件，打包下來的文件有點大。他別是那個lodash插件的代碼特別多。

大概會長成這個樣子。

因此會用到上面那個require.ensure()，這是一種按需加載，webpack 在編譯時，會靜態地解析代碼中的 require.ensure()，同時將模塊添加到一個分開的 chunk 當中。這個新的 chunk 會被 webpack 經過 jsonp 來按需加載。

• 依賴 dependencies

  這是一個字符串數組，經過這個參數，在全部的回調函數的代碼被執行前，咱們能夠將全部須要用到的模塊進行聲明。

• 回調 callback

  當全部的依賴都加載完成後，webpack會執行這個回調函數。require 對象的一個實現會做爲一個參數傳遞給這個回調函數。所以，咱們能夠進一步 require() 依賴和其它模塊 提供下一步的執行。

• chunk名稱 chunkName

  chunkName 是提供給這個特定的 require.ensure() 的 chunk 的名稱。經過提供 require.ensure() 不一樣執行點相同的名稱，咱們能夠保證全部的依賴都會一塊兒放進相同的 文件束(bundle)。這一部分是放在代碼中的，也就是這樣

import './subPageA'
import './subPageB'

require.ensure(['lodash'],function () {
    var _=require('lodash')
    _.join(['1','2'],'3')
},'vendor')
export default 'pageA'
// dependencies:'lodash'
//callback: function()
//chunkName:vendor

而後開始打包

這裏說下，打包之後就會生成兩個js文件。可是pageA中依賴的兩個js並非單純的js，他們也有共同的依賴，若是給這個共同的依賴

提出來會不會好一些了。而後開始了。

var page=subPageA
if(page==='subPageA'){
require.ensure(['./subPageA'],function () {
    var subpageA=require('./subPageA')
},'subPageA')
}

else if(page==='subPageB'){
require.ensure(['./subPageB'], function () {
   var subpageA=require('./subPageB')
},'subPageB')
}

require.ensure(['lodash'],function () {
    var _=require('lodash')
    _.join(['1','2'],'3')
},'vendor')
export default 'pageA'

那個if邏輯沒啥用的。而後看圖

如今被打包成了四個。

那麼對於subpageb和subpagea共同的依賴又怎麼搞了，

在page.js文件的開頭給她引入進來是個moduleA.js

requier.include('./moduleA')
打包之後A，B都變小了，說明引入進來了。

大概就是這個樣子。打包好之後的js文件效果如何了？

首先會報錯，這是怎麼回事了。原來要在webpack.config.js裏面修改下數據。publicpath：

大概配置成這樣就成了。打包好之後生成了三個js文件。

 

確實給咱們打包好了。插件的代碼，subpageA的代碼，還有主代碼pageA.bundle.js。

而後在subpageA中隨便console.log()點代碼也是能打印的。說明真的打包好了。

可是問題來了，咱們還有import沒有講到，還有如何實現異步也沒說。

代碼修改爲這個樣子，而後打包，

而後結構變成這樣，沒有 chunkName因此變成這樣。打開瀏覽器

 

而後發現import後的函數立刻就執行了。之前subpageA裏面的東西也還在，如今打包好的目錄結構以下圖

若是想添加 chunkName，在import中添加就好了