webpack: require.ensure与require AMD的区别

原创 2015年07月10日 09:18:02

简介

require-ensurerequire-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"
        }
    };
  • 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

源代码

webpack-module-require

vue按需加载组件-webpack require.ensure

webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,...
  • qq_27626333
  • qq_27626333
  • 2017年07月28日 09:58
  • 4222

vue项目优化之按需加载组件-使用webpack require.ensure

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]...
  • yangbingbinga
  • yangbingbinga
  • 2017年03月11日 15:11
  • 12394

Python 官方标准常用库

Python 标准库一览(Python进阶学习) 标签: python标准库文档 2016-08-27 11:28 12059人阅读 评论(0) 收藏 举报 分类: Phython(9)版权声...
  • qq_36407760
  • qq_36407760
  • 2017年09月28日 21:12
  • 100

The Python Standard Library

https://docs.python.org/3/library/ While The Python Language Reference describes the exact synt...
  • mydriverc2
  • mydriverc2
  • 2014年12月01日 15:06
  • 371

webpack入门(三)——webpack 配置

喂一个配置对象给webpack ,它就可以干活儿了。根据你用webpack的用法,有两种途径传入这个对象:CLI( 命令行)如果你用命令行,命令行会读取一个叫webpack.config.js(或者用...
  • keliyxyz
  • keliyxyz
  • 2016年05月28日 23:52
  • 45103

webpack中require和import的区别

我之前在 《前端搭环境之从入门到放弃》这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensur...
  • qq_24122593
  • qq_24122593
  • 2016年11月09日 18:07
  • 9118

webpack对样式的处理 ,导入样式require和import的区别

我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。 一般来说需要引入css-...
  • chengnuo628
  • chengnuo628
  • 2016年09月08日 21:44
  • 15085

Webpack-源码一,使用require加载并打包模块

最近有同学致力于写一个脚手架工具,在研究webpack源码,问了我几个问题,然而我完全不能解答。于是开始研究webpack。 webpack做的事情主要是实现前端模块化(即:让前端也可以像node端一...
  • qiqingjin
  • qiqingjin
  • 2017年03月06日 18:49
  • 4290

vue项目优化之按需加载组件-使用webpack require.ensure

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]...
  • yangbingbinga
  • yangbingbinga
  • 2017年03月11日 15:11
  • 12394

开发大型 web 项目时如何按需加载?

本文来自作者 爱死费崇政 在 GitChat 上分享「利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载」,「阅读原文」查看交流实录 ...
  • GitChat
  • GitChat
  • 2017年12月04日 00:00
  • 389
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack: require.ensure与require AMD的区别
举报原因:
原因补充:

(最多只允许输入30个字)