首页 >web前端 >js教程 >详解webpack require.ensure与require AMD的区别_javascript技巧

详解webpack require.ensure与require AMD的区别_javascript技巧

韦小宝
韦小宝原创
2017-12-15 10:49:081590浏览

本篇文章主要介绍了详解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.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn