详解webpack require.ensure与require AMD的区别

时间:2021-05-25

简介

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" }};

    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,控制台输出:

    module1aaamodule2bbb

    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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章