webpack require.ensure スキルと require AMD_javascript スキルの違いの詳細な説明

この記事では主にwebpackの詳細な説明を紹介します require.ensureとrequire AMDの違い 編集者は非常に優れており、皆さんにも参考になると思います。 webpack に興味がある場合は、エディターをフォローしてご覧ください。

はじめに

require-ensure と require-amd の違い:

require-amd

説明: と同じです。 AMD仕様のrequire関数、使用する場合はモジュール配列とコールバック関数を渡します

構文: require(dependency: String[], [callback: function( ...)])

Parameters

1. dependency: モジュール依存関係配列

2. callback: コールバック関数

require-ensure

説明: require.ensure は必要な場合にのみ依存モジュールをダウンロードします. パラメータを指定した場合 モジュールのダウンロード後（ダウンロードしたモジュールはまだ実行されていない状態）、

パラメータで指定されたコールバック関数が実行されます。 require.ensure はチャンクを作成し、チャンクの名前を指定できます。チャンク名がすでに存在する場合、依存するモジュールは、Webpack のビルド時に個別に生成されます。ファイル。

構文: require.ensure(dependency: String[], callback: function([require]), [chunkName: String])

1. dependency: 依存モジュールの配列

2. callback: コールバック関数、関数が呼び出されるときに、require パラメーターが渡されます

3. chunkName: モジュール名、構築中にファイルを生成するときに名前を付けるために使用されます

注: requi.e​​nsure モジュールはダウンロードされるだけで、実行されません。このモジュールのみが実行されます。コールバック関数が require(モジュール名) を使用するまで実行されません。

example

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

module1 .js

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

module2.js

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

コマンドラインでwebpackを実行する --config webpack.config.amd.js - .バンドル。 js

- 1.chunk.js
- module1.js
- module2.js


実行結果

ブラウザで amd/index.html を実行し、コンソール出力:

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

require-ensure

ソースコード

module1
aaa
module2
bbb

example.ensure.js

module1.js
同上

module2.js
同上

ビルド結果

コマンドラインでwebpackを実行 --config webpack.config.ensure.js - main.bundle.js

- 1 .chunk.js
- module1.js
- module2.js


実行結果

ブラウザでensure/index.htmlを実行し、コンソール出力:

module2

module1



require -ensure-chunk

ソースコード

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.ensur.chunk.js

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

モジュール1。 js
上と同じ

module2.js
上と同じ

ビルド結果

コマンドラインでwebpackを実行 --config webpack.config.ensure.js - main.bundle.js

- 1.chunk .js
- module1.js
- module2.js


実行結果

ブラウザで ensure/index.html を実行し、コンソール出力:

module1

ccc
1module2
ddd


以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

webpack require.ensure と require AMD の違いの詳細な説明

webpack の学習チュートリアル フロントエンド パフォーマンス最適化の概要

以上がwebpack require.ensure スキルと require AMD_javascript スキルの違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。