Question

我有一个大型应用程序，现在大约5mb用于app.js和1mb +用于供应商js。我认为它将跨越10mb，我们的目标用户在慢速互联网上，每个用户拥有不同的权限，因此大多数组件不可供用户使用。

我想从构建过程中排除一些大的组件并按需加载它们。到目前为止，我喜欢这个想法https://github.com/Cryrivers/ember-remote-component/blob/master/app/components/remote-component.js，它检查组件是否已加载，如果没有，则使用AJAX加载它们

类似

if(!container.hasRegistration(`component:${ componentName }`)){
    $.when(
        $.getScript(`/remote-components/${ componentName }/component.js`),
        $.getScript(`/remote-components/${ componentName }/template.js`)
    ).done(()=> {
        let container = getOwner(this);
        container.register(`component:${ componentName }`, require(`${ ENV.modulePrefix }/components/${ componentName }`).default, {singleton: false});
        this.set('isLoaded', true);
    })
}

我认为这可行。但这里有两个问题

答：如何从构建过程中排除组件，并阻止它连接，但也将它们保存在 / dist / components / abc / 文件夹中

B：将template.hbs单独编译为该组件的template.js，因为在通过AJAX加载后编译模板会导致巨大的性能问题。

Answer 1

这不是OP正在寻找的确切解决方案，但我认为这是一个更好的长期解决方案：

我认为延迟加载的引擎可能是解决此问题的更好方法。 https://github.com/dgeb/ember-engines

您可以阻止大部分用户加载大多数用户。

根据项目的README，主分支中提供了对延迟加载的实验支持。

如何自定义ember-cli构建以排除源代码concat

1 个答案: