详解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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
javascript基本类型详解
Nov 28 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
node.js express框架简介与实现
Jul 23 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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程序员工具
2008/05/26 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python 40行代码实现人脸识别功能
2017/04/02 Python
python版简单工厂模式
2017/10/16 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
洗煤厂厂长岗位职责
2014/01/03 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
学生生病请假条范文
2014/02/16 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014年电厂工作总结
2014/12/04 职场文书
员工离职感谢信
2015/01/22 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers