Question

使用require.ensure机制，可以加载多个资源并将它们放在同一块中，如下所示：

let promise;

export function loadLib() {
    if (!promise) {
        promise = new Promise(resolve => {
            require.ensure(
                [],
                require => {
                    require('some-lib/dist/some-lib.css');
                    require('./some-other-stuff');
                    resolve(require('some-lib'));
                },
                'lib.some-filename'
            );
        });
    }
    return promise;
}

最近，我会尽可能使用动态导入机制，例如

System.import(/* webpackChunkName: 'component.MyComponent' */ './MyComponent')`

通常与例如react-loadable或反应16个懒惰。

因此：如何将带有动态import语句的多个资源加载到单个块中？或者：使用动态导入时将多个资源捆绑到同一块中的最佳策略是什么？

重点是将文件捆绑在一起，而不要使用自定义文件名（我知道在某些情况下，例如cra，不建议使用System.import()，而建议使用import()，这可能不支持webpackChunkName语法。）

Webpack动态导入-如何加载多个资源

0 个答案: