webpack require.ensure와 require AMD_javascript 기술의 차이점에 대한 자세한 설명

이 글에서는 webpack에 대한 자세한 설명을 중심으로 require.ensure와 require AMD의 차이점을 편집자는 꽤 좋다고 생각하며 모두에게 참고 자료로 활용하겠습니다. webpack에 관심이 있다면 편집자를 따라가서 살펴보세요.

소개

require-ensure와 require-amd의 차이점:

require-amd

설명: 와 동일 AMD 사양의 require 함수를 사용할 때 모듈 배열과 콜백 함수를 전달하세요. 콜백 함수는 모듈을 다운로드하고 실행한 후에만 실행됩니다.

Syntax: require(dependents: String[], [callback: function( ...)])

Parameters

1. dependents: 모듈 종속성 배열

2. callback: 콜백 함수

require-ensure

설명: require.ensure는 필요할 때만 종속 모듈을 다운로드합니다. 매개변수가 지정된 경우 모듈이 다운로드된 후(다운로드된 모듈이 아직 실행되지 않음)

매개변수에 지정된 콜백 함수가 실행됩니다. require.ensure는 청크를 생성하며 청크 이름을 지정할 수 있습니다. 청크 이름이 이미 존재하는 경우 종속 모듈이 기존 청크에 병합됩니다. 마지막으로 이 청크는 webpack이 빌드될 때 별도로 생성됩니다. 파일.

구문: ​​require.ensure(종속성: 문자열[], 콜백: 함수([요구]), [chunkName: 문자열])

1. 종속성: 종속 모듈 배열

2. 콜백: 콜백 함수, 함수가 호출되면 필수 매개변수가 전달됩니다

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

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;

Build results

명령줄에서 webpack 실행 --config webpack.config.amd.js
- 들. Node.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

실행 결과

브라우저에서 verify/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');

모듈1. js
위와 동일

module2.js
위와 동일

빌드 결과

명령줄에서 webpack 실행 --config webpack.config.ensure.js
- main.bundle.js
- 예시. amd.js
- 1.chunk .js
- module1.js
- module2.js

실행 결과

브라우저에서 verify/index.html을 실행하면 콘솔 출력:

aaa
module1
bbb
ccc
1module2
ddd

위의 내용이 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 PHP 중국어 웹사이트를 지지해 주시길 바랍니다.

관련 추천:

vue on-demand loading 구성 요소 webpack require.ensure

webpack require.ensure와 require AMD

webpack 학습의 차이점에 대한 자세한 설명 튜토리얼 프론트엔드 성능 최적화 요약

위 내용은 webpack require.ensure와 require AMD_javascript 기술의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!