Webpack require.ensure与AMD require区别详解

Webpack 的按需加载工具里，require.ensure算是老牌选手了，虽然现在用的不多，但有些项目里还真离不开它。它的亮点就是支持代码分割，你可以把不常用的模块拆出去，等用到时再加载，页面首屏加载速度会快不少。

写法上，它和AMD 的require有点像，也都是异步加载模块，但执行时机和策略不太一样。require.ensure下载完不会立刻执行，得你手动require一下；AMD 那套下载后就直接跑了，比较直接。

比如下面这个栗子：

require.ensure(["./module1"], function(require) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
}, 'testChunk');

这段代码里，module1和module2都会被打包到一个名叫testChunk的 chunk 文件里，真正执行module2还是靠你回调里手动引。

而 AMD 的写法更像这样：

require(["module1", "module2"], function(module1, module2) {
  console.log("module1:", module1);
  console.log("module2:", module2);
});

模块加载完就直接执行，适合一些对性能要求没那么高的项目，结构清晰，依赖也好维护。

要注意的是，require.ensure是 Webpack 专属的，离了 Webpack 就用不了；AMD 就比较通用，像老项目用的RequireJS就是基于它的。

如果你做的项目需要按需加载、要考虑首屏性能，那 Webpack 的方案更合适；但要是做工具库、依赖管理比较多，AMD 那套也挺顺手的。

有空可以看看这些相关文章：

• Vue 按需加载组件：Webpack require.ensure 方法
• webpack require.ensure 与 require AMD 对比
• 懒加载与按需加载详解

如果你项目还在用 Webpack 3 之前的版本，或者有历史包袱要迁移，require.ensure还是能派上用场的。新项目？考虑下import()更香。