Webpack 缩短 属性 名称

Webpack shorten property name

我们有 Vue 2.x.x 应用程序(打字稿)我们的应用程序应该分成模块。 像/users, /articles, /reports等,是微前端架构。

例如这个解决方案: https://itnext.io/setup-a-micro-frontend-architecture-with-vue-and-single-spa-2c89528bf72f

我们想根据用户权限动态加载这些模块,所以我们决定选择 SystemJS。

export const ApplicationModuleService = {
   
    
        createModule(name: string, url: string, activeWhen = "/", props = {}): RegisterApplicationConfig {
            return {
                name,
                app: () => window.System.import(url), //system js is loading from cdn. in global.d has definition
                activeWhen,
                customProps: props
            }
        }
    }

我们从 CDN 导入了 SystemJS,当我们用 webpack 转译它时,我们无法使用 System.import,但我们被迫使用 window 对象。

当我们尝试使用 System.import 时,webpack 将其转换为缩短的 属性,例如: l.import(...) 我们尝试使用 webpack DefinePlugin、ProvidePlugin 等创建全局 prop,但没有成功。

有没有办法,怎么解决? 谢谢你的时间

如果您已经在使用 webpack,则没有理由使用 System.js 作为模块加载器。

Webpack 具有 built-in 延迟加载模块功能。

您需要做的就是使用 import('path/to/my/lazy/module'),其中 returns 和 Promise 将在加载模块时解析。 Webpack 将处理其余的工作。

您的代码应如下所示:

export const ApplicationModuleService = {
  createModule(name: string, url: string, activeWhen = '/', props = {}): RegisterApplicationConfig {
    return {
      name,
      app: () => import('path/to/lazy/module')
      activeWhen,
      customProps: props,
    };
  },
};

对于 CDN 支持,您可以指定 publicPath 选项。

更多信息read this