如何加载在运行时确定的javascript es6模块？

Question

我正在开发一个包含多个仪表板的SPA。每个仪表板都是一组遵循布局的Web组件。这些组件不是静态已知的。它们是在运行时确定的。

我想要实现的是以下情形：

1. 应用程序启动。
2. 应用程序执行XHR以从REST服务中获取仪表板表示形式。
3. 用户看到按名称列出的仪表板。
4. 用户单击仪表板项目。 （例如信息中心1）
5. 应用程序确定加载仪表板1所需的必要组件（Web组件）
6. 加载 Web组件及其依赖项。

我很清楚如何动态加载Web组件，here对此进行了回答

我的实际问题是

  

如何在运行时加载依赖项的Web组件   不必加载重复的依赖项？

     

打包时是否要遵循任何模块格式或惯例   网络组件？

Answer 1

如果您有从仪表板到实现它的模块的映射，则可以仅动态import()必要的模块。 JS模块系统将负责不加载已经加载的模块，因此lit-element之类的常见依赖项将仅加载一次。

此重复数据删除基于URL，因此您必须确保已通过npm安装了一个依赖项副本。 npm dedupe将尝试对node_modules/文件夹进行重复数据删除，而npm ls将使您看到依赖关系树。

当前所有的浏览器都支持动态import()，大多数捆绑程序也支持-只要参数是字符串常量。这意味着如果要使用捆绑器，则无法基于仪表板计算模块URL。您需要类似的东西：

const dashboardLoaders = {
  'dash-1': () => import('./dashboards/dash-1.js'),
  'dash-2': () => import('./dashboards/dash-2.js'),
  // etc...
};