简介
require-ensure和require-amd的区别:
require-amd
说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数
语法: require(dependencies: String[],[callback: function(...)])
参数
- dependencies: 模块依赖数组
- callback: 回调函数
require-ensure
说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行
参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk的名称,如果这个chunk名已经存在了,则将本次依赖的模块合并到已经存在的chunk中,最后这个chunk在webpack构建的时候会单独生成一个文件。
语法: require.ensure(dependencies: String[],callback: function([require]),[chunkName: String])
注意点:requi.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。
示例
require-amd
源代码
webpack.config.amd.js
example.amd.js
module1.js
module2.js
构建结果
命令行中运行webpack --config webpack.config.amd.js - main.bundle.js - example.amd.js - 1.chunk.js - module1.js - module2.js
运行结果
浏览器中运行amd/index.html,控制台输出:
require-ensure
源代码
webpack.config.ensure.js
example.ensure.js
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
example.ensur.chunk.js
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/34726.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。