详解webpack require.ensure与require AMD的区别


Posted in Javascript onDecember 13, 2017

简介

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
21个值得收藏的Javascript技巧
Feb 04 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
vue登录路由验证的实现
Dec 13 #Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 #Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 #Javascript
vue组件中使用iframe元素的示例代码
Dec 13 #Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 #Javascript
vue实现nav导航栏的方法
Dec 13 #Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 #Javascript
You might like
PHP对字符串的递增运算分析
2010/08/08 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php生成excel列序号代码实例
2013/12/24 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
仓库管理制度
2014/01/21 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
股权转让协议书
2014/04/12 职场文书
社会实践活动总结范文
2014/07/03 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
护士自我推荐信范文
2015/03/24 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Vue操作Storage本地化存储
2022/04/29 Vue.js
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript