详解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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
VUE的history模式下除了index外其他路由404报错解决办法
Aug 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
destoon常用的安全设置概述
2014/06/21 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
js实现全选和全不选
2020/07/28 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
详解Python中的__new__()方法的使用
2015/04/09 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
解决python3输入的坑——input()
2020/12/05 Python
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
学习党章思想汇报
2014/01/07 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
优秀党员先进材料
2014/12/18 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
七个Python必备的GUI库
2021/04/27 Python
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python