深刻淺出的webpack4構建工具---webpack+vue+router 按需加載頁面(十五)

1. 爲何須要按需加載？

對於vue單頁應用來說，咱們常見的作法把頁面上全部的代碼都打包到一個bundle.js文件內，可是隨着項目愈來愈大，文件愈來愈多的狀況下，那麼bundle.js文件也會愈來愈大，文件大的時候會致使打開頁面用戶體驗相對來講會變慢。所以按需加載代碼是頗有必要的，每次打開某一個頁面的時候，只按需加載那個頁面的代碼，這樣的話，項目中其餘代碼就不會被加載，這樣的話，bundle.js文件也不會把全部項目頁面文件代碼打包進去，文件也不會很大。其餘的頁面對應的代碼第一次都是按需加載的，加載完成後，就會在瀏覽器緩存中了。

2. 如何使用webpack+vue+router 實現vue頁面按需加載？

仍是和以前同樣，在實現功能以前，咱們仍是看下咱們項目中的整個目錄架構以下：

### 目錄結構以下：
demo1                                       # 工程名
|   |--- dist                               # 打包後生成的目錄文件             
|   |--- node_modules                       # 全部的依賴包
|   |--- app
|   | |---index
|   | | |-- views                           # 存放全部vue頁面文件
|   | | | |-- home.vue
|   | | | |-- index.vue
|   | | | |-- xxx.vue
|   | | |-- components                      # 存放vue公用的組件
|   | | |-- app.js                          # vue入口配置文件
|   | | |-- router.js                       # 路由配置文件
|   |--- views
|   | |-- index.html                        # html文件
|   |--- webpack.config.js                  # webpack配置文件 
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉碼文件

webpack中提供了 require.ensure()來實現頁面按需加載。之前咱們引入路由的時候都是經過 import 這樣的方式引入的，可是使用import引入vue文件它是不會進行頁面按需加載的。首先能夠看下咱們路由頁面。以下：

app/index/router.js 以前代碼使用import引入以下：

import Vue from 'vue';
import VueRouter from 'vue-router';

// 引入組件 
import home from './views/home';

import xxx from './views/xxx';

// 告訴 vue 使用 vueRouter

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: home
  },
  {
    path: '/xxx',
    component: xxx
  },
  {
    path: '*', // 其餘沒有的頁面都重定向到 home頁面去
    redirect: '/home'
  }
]

var router = new VueRouter({
  routes: routes
});

export default router;

如上代碼，每個vue單頁面都是使用import引用進來的，它不會進行頁面懶加載的，因此在打包的時候都會打包到bundle.js文件內，所以文件會變得愈來愈大。所以咱們須要使用 require.ensure()實現按需加載。

2.一、學習使用 require.ensure()

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

基本使用語法以下：require.ensure(dependencies: String[], callback: function(require), chunkName: String);

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

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

參數chunkName： chunkName 是提供給這個特定的 require.ensure() 的 chunk 的名稱。

下面咱們來看一個demo，在app/index 下新建一個文件夾爲js。在js文件夾內分別新建a.js和b.js，代碼分別以下：

a.js 代碼以下：

alert('aaaaaa');

b.js 代碼以下：

alert('bbbbbbb');

而後入口文件app.js 代碼以下：

require('./js/a');
require.ensure([], function(require) {
  require('./js/b');
});

webpack.config.js 打包以下：

module.exports = {
  // 入口文件
  entry: {
    main: './app/index/app.js'
  },
  output: {
    filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].js' : 'bundle.js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  }
}

經過執行這個項目的 webpack 構建，咱們發現 webpack 建立了2個新的文件束， bundle.js 和 0.bundle.js。以下圖所示：

app.js 和 a.js 被打包進 bundle.js.

其中 0.bundle.js 代碼以下：

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{"./app/index/js/b.js":function(b,n){alert("bbbbbbb")}}]);

bundle.js 代碼以下：

!function(u){function e(e){for(var n,t,r=e[0],o=e[1],a=0,i=[];a<r.length;a++)t=r[a],p[t]&&i.push(p[t][0]),p[t]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(u[n]=o[n]);for(l&&l(e);i.length;)i.shift()()}var t={},p={main:0};function c(e){if(t[e])return t[e].exports;var n=t[e]={i:e,l:!1,exports:{}};return u[e].call(n.exports,n,n.exports,c),n.l=!0,n.exports}c.e=function(a){var e=[],t=p[a];if(0!==t)if(t)e.push(t[2]);else{var n=new Promise(function(e,n){t=p[a]=[e,n]});e.push(t[2]=n);var r,o=document.getElementsByTagName("head")[0],i=document.createElement("script");i.charset="utf-8",i.timeout=120,c.nc&&i.setAttribute("nonce",c.nc),i.src=c.p+""+a+".bundle.js",r=function(e){i.onerror=i.onload=null,clearTimeout(u);var n=p[a];if(0!==n){if(n){var t=e&&("load"===e.type?"missing":e.type),r=e&&e.target&&e.target.src,o=new Error("Loading chunk "+a+" failed.\n("+t+": "+r+")");o.type=t,o.request=r,n[1](o)}p[a]=void 0}};var u=setTimeout(function(){r({type:"timeout",target:i})},12e4);i.onerror=i.onload=r,o.appendChild(i)}return Promise.all(e)},c.m=u,c.c=t,c.d=function(e,n,t){c.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(n,e){if(1&e&&(n=c(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var r in n)c.d(t,r,function(e){return n[e]}.bind(null,r));return t},c.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(n,"a",n),n},c.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},c.p="",c.oe=function(e){throw e};var n=window.webpackJsonp=window.webpackJsonp||[],r=n.push.bind(n);n.push=e,n=n.slice();for(var o=0;o<n.length;o++)e(n[o]);var l=r;c(c.s="./app/index/app.js")}({"./app/index/app.js":function(e,n,t){t("./app/index/js/a.js"),t.e(0).then(function(e){t("./app/index/js/b.js")}.bind(null,t)).catch(t.oe)},"./app/index/js/a.js":function(e,n){alert("aaaaaa")}});

如上代碼分析能夠看到，經過 require.ensure([], function(require) { require('./js/b'); }) 動態加載的b函數代碼會單獨生成一個0.bundle.js文件，若是頁面有多個 require.ensure 這個動態加載文件的話，它就會生成多個xx.bundle.js文件了，所以對於vue路由頁面來說可使用這種方法來動態加載vue頁面了。

如上webpack.config.js 文件，咱們能夠再加個配置項 chunkFilename，該配置項，能夠指定chunk的名字，以下配置：

module.exports = {
  // 入口文件
  entry: {
    main: './app/index/app.js'
  },
  output: {
    filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].js' : 'bundle.js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: 'chunks/[name].chunk.js'
  }
}

app/index/app.js 代碼以下，加了第三個參數, 名字爲b：

require('./js/a');
require.ensure([], function(require) {
  require('./js/b');
}, 'b');

而後會在 dist/chunks 下生成 b.chunk.js, 以下圖所示：

2.2. 在vue-router中使用require.ensure() 方法動態加載不一樣的vue頁面。

所以咱們如今能夠在 app/index/router.js 裏面以下對vue頁面文件進行按需加載了，以下代碼：

import Vue from 'vue';
import VueRouter from 'vue-router';

// 告訴 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    name: 'home',
    component: resolve => require.ensure([], () => resolve(require('./views/home')), 'home')
  },
  {
    path: '/xxx',
    name: 'xxx',
    // component: resolve => require(['./views/xxx'], resolve)
    component: resolve => require.ensure([], () => resolve(require('./views/xxx')), 'xxx')
  },
  {
    path: '*', // 其餘沒有的頁面都重定向到 home頁面去
    redirect: '/home'
  }
]

var router = new VueRouter({
  base: '/app/index', // 配置單頁應用的基路徑
  routes: routes
});

export default router;

webpack.config.js 代碼配置以下：

module.exports = {
  // 入口文件
  entry: {
    main: './app/index/app.js'
  },
  output: {
    filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].js' : 'bundle.js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: 'chunks/[name].chunk.js'
  }
} 

在dist/chunks 目錄下會生成以下文件，以下圖所示

github源碼