簡介

require-ensure和require-amd的區別：

require-amd

說明: 同AMD規范的require函數，使用時傳遞一個模塊數組和回調函數，模塊都被下載下來且都被執行后才執行回調函數

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

參數

1. dependencies: 模塊依賴數組
2. callback: 回調函數

require-ensure

說明: require.ensure在需要的時候才下載依賴的模塊，當參數指定的模塊都下載下來了（下載下來的模塊還沒執行），便執行

參數指定的回調函數。require.ensure會創建一個chunk，且可以指定該chunk的名稱，如果這個chunk名已經存在了，則將本次依賴的模塊合并到已經存在的chunk中，最后這個chunk在webpack構建的時候會單獨生成一個文件。

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

1. dependencies: 依賴的模塊數組
2. callback: 回調函數，該函數調用時會傳一個require參數
3. chunkName: 模塊名，用于構建時生成文件時命名使用

注意點：requi.ensure的模塊只會被下載下來，不會被執行，只有在回調函數使用require(模塊名)后，這個模塊才會被執行。

示例

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; 

構建結果

命令行中運行webpack --config webpack.config.amd.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運行結果

瀏覽器中運行amd/index.html，控制臺輸出：

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
同上

構建結果

命令行中運行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運行結果

瀏覽器中運行ensure/index.html，控制臺輸出：

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
同上

構建結果

命令行中運行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運行結果

瀏覽器中運行ensure/index.html，控制臺輸出：

aaa
module1
bbb
ccc
1module2
ddd

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com