1

我有一个相当大的应用程序，现在 app.js 大约 5mb，供应商 js 大约 1mb+。我假设它会超过 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);
    })
}

我认为这可以工作。但这里有两个问题

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

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

4

1 回答 1

3

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

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

您可以阻止大多数用户加载您的大部分应用程序。

根据项目的自述文件，主分支中提供了对延迟加载的实验性支持。

于 2016-11-29T13:55:11.477 回答