詳解webpack require.ensure與require AMD的差別_javascript技巧

本篇文章主要介紹了詳解webpack require.ensure與require AMD的差別，小編覺得蠻不錯的，也幫大家做個參考。對webpack 有興趣的可以跟著小編一起過來看看吧

簡介

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.e​​nsure的模組只會被下載下來，不會被執行，只有在回呼函數使用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#########以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。 ############相關推薦：###################詳情vue按需載入元件webpack require.ensure######## ########webpack require.ensure與require AMD的差異詳解#############webpack學習教學課程之前端效能最佳化總結######

以上是詳解webpack require.ensure與require AMD的差別_javascript技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！