webpack ------require,ensure
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])
- dependencies: 依赖的模块数组
- callback: 回调函数,该函数调用时会传一个require参数
- 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"
}
};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
example.amd.js
require(["./module1"], function(module1) {
console.log("aaa");
var module2 = require("./module2");
console.log("bbb");
});- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
module1.js
console.log("module1");
module.exports = 1;- 1
- 2
- 1
- 2
module2.js
console.log("module2");
module.exports = 2;- 1
- 2
- 1
- 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
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
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"
}
};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
example.ensure.js
require.ensure(["./module1"], function(require) {
console.log("aaa");
var module2 = require("./module2");
console.log("bbb");
require("./module1");
}, 'test');- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
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
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
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"
}
};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
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');- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
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
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
源代码
webpack ------require,ensure的更多相关文章
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- vue按需加载组件-webpack require.ensure
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...
- webpack: require.ensure与require AMD的区别
http://blog.csdn.net/zhbhun/article/details/46826129
- webpack require.ensure 按需加载
使用 vue-cli构建的项目,在 默认情况下 ,会将所有的js代码打包为一个整体比如index.js.当使用存在多个路由代码的时候,index.js可能会超大,影响加载速度. 这个每个路由页面除了i ...
- webpack中利用require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- 在vue中使用import()来代替require.ensure()实现代码打包分离
最近看到一种router的写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const login = ...
- require.ensure的用法;异步加载-代码分割;
webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这 个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...
随机推荐
- 【转】生产环境MySQL Server核心参数的配置
⑴ lower_case_table_names ● 推荐理由 GNU/Linux 平台,对数据库.表.存储过程等对象名称大小 ...
- Android自学学习资料
最近在自学Android编程,在网上看了一些博客和视频教程,觉得比较好的分享一下,继续学习,gangbade~ 国外android官网总是出现连不上的情况,如果你不想FQ的话,这里github上可以直 ...
- webService设置超时时间
在客户端配置文件中设置: <bindings> <basicHttpBinding> <binding name="UrlCrawler ...
- 【其他】IT公司的企业文化与竞争力
一直觉得三流企业靠成本竞争,二流企业靠体制竞争,一流企业靠文化竞争. 企业在竞争时候,总会提到一个词:核心竞争力.对于IT企业来说,核心竞争是什么?无论是技术也好,销售也罢,归根到底还是人才的竞争,优 ...
- CSS基础-引入方法,选择器,继承
一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...
- Wpf中MediaElement循环播放
原文:Wpf中MediaElement循环播放 前一段时间做了一个项目,里面牵涉到媒体文件的循环播放问题,在网上看了好多例子,都是在xaml中添加为MediaElement添加一个TimeLine,不 ...
- 几道C语言的题目!
注:编译环境 VC2010,系统WIN7 64位,其他编译环境和系统未测试 1-1. 编程,输入n,输出如下例(n=5)所示的图形: ***** ***** ***** ***** ***** # ...
- nginx+vaadin配置
nginx+Vaadin的特殊性在于配置WEBSOCKET或LONG_POLLING.网上资料不多,自己多次尝试配置都不成功,后来终于找到这篇说明才得以配置成功,使用效果不错,介绍如下. 1./etc ...
- Windows SVN变化邮件通知(Python2.7实现)
1,新增文件post-commit.bat 内容: rem REPOS-PATH (the path to this repository) set REPOS=%1 rem REV (the num ...
- [置顶] Jquery发展
jQuery在2006年1月由美国人JohnResig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由DaveMethvin率领团队进行开发.是继prototype ...