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

韦小宝
リリース: 2017-12-15 10:49:08
オリジナル
1569 人が閲覧しました

この記事では主に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


rree


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

module1
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を実行し、コンソール出力:

aaa

module2

bbb

module1



require -ensure-chunk

ソースコード

webpack.config.ensure.chunk.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.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 を実行し、コンソール出力:

aaa

module1

bbb

ccc
1module2
ddd


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

関連する推奨事項:

vue オンデマンド読み込みコンポーネントの詳細な説明 webpack require.ensure

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート