webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

時間 2019-11-17

標籤 webpack4 webpack 系列教程頁面解決方案代碼分割加載简体版

原文原文鏈接

本節課講解webpack4打包單頁應用過程當中的代碼分割和代碼懶加載。不一樣於多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是經過webpack配置來實現的，而是經過webpack的寫法和內置函數實現的。javascript

目前webpack針對此項功能提供 2 種函數：html

import(): 引入而且自動執行相關 js 代碼
require.ensure(): 引入但須要手動執行相關 js 代碼

本文將會進行逐一講解。vue

>>> 本節課源碼java

>>> 全部課程源碼webpack

1. 準備工做

這次代碼的目錄結構以下：git

其中，page.js是入口文件,subPageA.js和subPageB.js共同引用module.js。下面，咱們按照代碼引用的邏輯，從底向上展現代碼：es6

module.js:github

export default "module";

subPageA.js:web

import "./module";
console.log("I'm subPageA");
export default "subPageA";

subPageB.js:vue-router

import "./module";
console.log("I'm subPageB");
export default "subPageB";

請注意：subPageA.js 和 subPageB.js 兩個文件中都執行了console.log()語句。以後將會看到import()和require()不一樣的表現形式：是否會自動執行 js 的代碼？

2. 編寫配置文件

下面編寫webpack配置文件（很簡單）：

const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry: {
    page: "./src/page.js" //
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

同時，關於第三方庫，由於要在page.js中使用lodash，因此，package.json文件配置以下：

{
  "devDependencies": {
    "webpack": "^4.15.1"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

3. `import()`編寫`page.js`

我我的是很是推薦import()寫法，由於和 es6 語法看起來很像。除此以外，import()能夠經過註釋的方法來指定打包後的 chunk 的名字。

除此以外，相信對vue-router熟悉的朋友應該知道，其官方文檔的路由懶加載的配置也是經過import()來書寫的。

下面，咱們將書寫page.js:

import(/* webpackChunkName: 'subPageA'*/ "./subPageA").then(function(subPageA) {
  console.log(subPageA);
});

import(/* webpackChunkName: 'subPageB'*/ "./subPageB").then(function(subPageB) {
  console.log(subPageB);
});

import(/* webpackChunkName: 'lodash'*/ "lodash").then(function(_) {
  console.log(_.join(["1", "2"]));
});
export default "page";

命令行中運行webpack，打包結果以下：

咱們建立index.html文件，經過<script>標籤引入咱們打包結果，須要注意的是：由於是單頁應用，因此只要引用入口文件便可（便是上圖中的page.bundle.js）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="./dist/page.bundle.js"></script>
</body>
</html>

打開瀏覽器控制檯，刷新界面，結果以下圖所示：

圖中圈出的部分，就是說明import()會自動運行subPageA.js和subPageB.js的代碼。

在 NetWork 選項中，咱們能夠看到，懶加載也成功了：

4. `require()`編寫`page.js`

require.ensure()不會自動執行js代碼，請注意註釋：

require.ensure(
  ["./subPageA.js", "./subPageB.js"], // js文件或者模塊名稱
  function() {
    var subPageA = require("./subPageA"); // 引入後須要手動執行，控制檯纔會打印
    var subPageB = require("./subPageB");
  },
  "subPage" // chunkName
);

require.ensure(
  ["lodash"],
  function() {
    var _ = require("lodash");
    _.join(["1", "2"]);
  },
  "vendor"
);

export default "page";

其實，根據咱們編寫的代碼，subPageA.js和subPageB.js共同引用了module.js文件，咱們能夠將module.js體現抽離出來：

require.include("./module.js"); // 將subPageA和subPageB共用的module.js打包在此page中

// ...
// 再輸入上面那段代碼

最終打包後，檢驗和引入方法與import()一致，這裏再也不冗贅。

歡迎技術交流，引用請註明出處。
我的網站：董沅鑫的我的網站
原文連接：webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

1. 準備工做

2. 編寫配置文件

3. import()編寫page.js

4. require()編寫page.js

3. `import()`編寫`page.js`

4. `require()`編寫`page.js`