この記事では主にwebpackの詳細な説明を紹介します require.ensureとrequire AMDの違い 編集者は非常に優れており、皆さんにも参考になると思います。 webpack に興味がある場合は、エディターをフォローしてご覧ください。
はじめに
require-ensure と require-amd の違い:
require-amd
説明: と同じです。 AMD仕様のrequire関数、使用する場合はモジュール配列とコールバック関数を渡します
構文: require(dependency: String[], [callback: function( ...)])
Parameters
dependency: モジュール依存関係配列
callback: コールバック関数
require-ensure
説明: require.ensure は必要な場合にのみ依存モジュールをダウンロードします. パラメータを指定した場合 モジュールのダウンロード後(ダウンロードしたモジュールはまだ実行されていない状態)、
パラメータで指定されたコールバック関数が実行されます。 require.ensure はチャンクを作成し、チャンクの名前を指定できます。チャンク名がすでに存在する場合、依存するモジュールは、Webpack のビルド時に個別に生成されます。ファイル。
構文: require.ensure(dependency: String[], callback: function([require]), [chunkName: String])
dependency: 依存モジュールの配列
callback: コールバック関数、関数が呼び出されるときに、require パラメーターが渡されます
chunkName: モジュール名、構築中にファイルを生成するときに名前を付けるために使用されます
注: requi.ensure モジュールはダウンロードされるだけで、実行されません。このモジュールのみが実行されます。コールバック関数が 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
- example.amd.js- 1.chunk.js
- module1.js
- module2.js
実行結果
ブラウザで amd/index.html を実行し、コンソール出力:
console.log("module2"); module.exports = 2;
require-ensure
ソースコード
webpack.config.ensure.jsmodule1 aaa module2 bbb
example.ensure.js
rrリー
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を実行し、コンソール出力:
aaamodule2
bbbmodule1
require -ensure-chunk
ソースコード
webpack.config.ensure.chunk.jsvar 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
- 例。 amd.js- 1.chunk .js
- module1.js
- module2.js
実行結果
ブラウザで ensure/index.html を実行し、コンソール出力:
aaamodule1
bbbccc
1module2
ddd
以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
vue オンデマンド読み込みコンポーネントの詳細な説明 webpack require.ensure
webpack require.ensure と require AMD の違いの詳細な説明
webpack の学習チュートリアル フロントエンド パフォーマンス最適化の概要
以上がwebpack require.ensure スキルと require AMD_javascript スキルの違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。