javascript - 使用动态导入的 Webpack 拆分代码

Question

我有一个使用 Webpack 的应用程序，现在我想要执行以下操作:

有一个包含多个资源的文件夹:

resources
 ├── A.json
 ├── B.json
 └── C.json

我想动态加载其中一个:

function getResource(name, callback) {
    require(['./resources' + name + '.json'], function(resource) {
        callback(resource);
    });
}

这对我来说效果很好，希望我的所有资源都捆绑到单个 1.js 文件中，但我想将它们拆分并仅按需加载一个。

如何使用 webpack 做到这一点？

Answer 1

你看过webpack的code splitting吗？ ？语法 require.ensure('foo.js', function() { ... }) 会导致 webpack 在编译时将 foo.js 构建到一个单独的文件中，并按需加载它(通过 AJAX/JSONP)在运行时。

不过，动态 require 是 webpack 中的一种反模式，并且 require.ensure 只接受模块的静态值(而不是表达式)。获得该行为的一个简单方法是在 switch 语句、if/elses 或类似内容中设置静态 require.ensure 调用:

switch (someFlagYouSet) {
  case 'a':
    require.ensure('./resources/A.json', function() {...})
    break;
  case 'b':
    require.ensure('./resources/B.json', function() {...})
    break;
  ...
}

也许不像人们想要的那么优雅，但是动态需求并不能很好地与静态分析和 Assets 生成一起工作，所以你会习惯它。您仍然可以在运行时按需加载。