詳解webpack require.ensure與require AMD的區(qū)別

簡(jiǎn)介

require-ensure和require-amd的區(qū)別：

require-amd

說明: 同AMD規(guī)范的require函數(shù)，使用時(shí)傳遞一個(gè)模塊數(shù)組和回調(diào)函數(shù)，模塊都被下載下來且都被執(zhí)行后才執(zhí)行回調(diào)函數(shù)

語(yǔ)法: require(dependencies: String[], [callback: function(...)])

參數(shù)

1. dependencies: 模塊依賴數(shù)組
2. callback: 回調(diào)函數(shù)

require-ensure

說明: require.ensure在需要的時(shí)候才下載依賴的模塊，當(dāng)參數(shù)指定的模塊都下載下來了（下載下來的模塊還沒執(zhí)行），便執(zhí)行

參數(shù)指定的回調(diào)函數(shù)。require.ensure會(huì)創(chuàng)建一個(gè)chunk，且可以指定該chunk的名稱，如果這個(gè)chunk名已經(jīng)存在了，則將本次依賴的模塊合并到已經(jīng)存在的chunk中，最后這個(gè)chunk在webpack構(gòu)建的時(shí)候會(huì)單獨(dú)生成一個(gè)文件。

語(yǔ)法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

1. dependencies: 依賴的模塊數(shù)組
2. callback: 回調(diào)函數(shù)，該函數(shù)調(diào)用時(shí)會(huì)傳一個(gè)require參數(shù)
3. chunkName: 模塊名，用于構(gòu)建時(shí)生成文件時(shí)命名使用

注意點(diǎn)：requi.ensure的模塊只會(huì)被下載下來，不會(huì)被執(zhí)行，只有在回調(diào)函數(shù)使用require(模塊名)后，這個(gè)模塊才會(huì)被執(zhí)行。

示例

require-amd

源代碼

webpack.config.amd.js

var path = require("path");
module.exports = {
  entry: "./example.amd.js",
  output: {
    path: path.join(__dirname, "amd"),
    filename: "[name].bundle.js",
    chunkFilename: "[id].chunk.js"
  }
};

example.amd.js

require(["./module1"], function(module1) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
});

module1.js

console.log("module1");
module.exports = 1;

module2.js

console.log("module2");
module.exports = 2;  

構(gòu)建結(jié)果

命令行中運(yùn)行webpack --config webpack.config.amd.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運(yùn)行結(jié)果

瀏覽器中運(yùn)行amd/index.html，控制臺(tái)輸出：

module1
aaa
module2
bbb

require-ensure

源代碼

webpack.config.ensure.js

var path = require("path");
module.exports = {
  entry: "./example.ensure.js",
  output: {
    path: path.join(__dirname, "ensure"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

example.ensure.js

require.ensure(["./module1"], function(require) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
  require("./module1");
}, 'test');

module1.js
同上

module2.js
同上

構(gòu)建結(jié)果

命令行中運(yùn)行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運(yùn)行結(jié)果

瀏覽器中運(yùn)行ensure/index.html，控制臺(tái)輸出：

aaa
module2
bbb
module1

require-ensure-chunk

源代碼

webpack.config.ensure.chunk.js

var path = require("path");
module.exports = {
  entry: "./example.ensur.chunk.js",
  output: {
    path: path.join(__dirname, "ensure-chunk"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

example.ensur.chunk.js

require.ensure(["./module1"], function(require) {
  console.log("aaa");
  require("./module1");
  console.log("bbb");
}, 'common');

require.ensure(["./module2"], function(require) {
  console.log("ccc");
  require("./module2");
  console.log("ddd");
}, 'common');

module1.js
同上

module2.js
同上

構(gòu)建結(jié)果

命令行中運(yùn)行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運(yùn)行結(jié)果

瀏覽器中運(yùn)行ensure/index.html，控制臺(tái)輸出：

aaa
module1
bbb
ccc
1module2
ddd

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。