远程组建加载方案

背景

webpack在打包构建时会依据自生的依赖分析进行拆包，但是在低代码平台和位前端架构中，很多时候需要我们基于当前的业务场景来动态引入需要的组建。

方案一

• 基于业务的需要对不同组建或模块进行拆包，用umd的方式进行构建，上传到cdn
• 业务测需要使用远程组建时，创建script标签加载远程的cdn组建。通过window就能访问组建

优点

• 每个组建可以单独打包个发布，不需要和主项目分布耦合。

缺点

• 采用umd的方式会在window下造成全局污染
• 原创组建的内部依赖也会打包到代码中无法复用基座项目的依赖

方案二

• 基于webpack5的模块联邦，声明模块间的依赖关系进行打包和引用

方案三

• 基于Systemjs
• Import maps声明各个远程组建和cdn地址间的关系

<script type="systemjs-importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"
      }
    }
</script>

• 业务中直接使用如下

const vue = System.import("vue").then(e => {
    const Vue = e.default
    new Vue({
        el: '#container',
        data :{
            date: '2021'
        }
    })
})

方案四

若是采用的react ssr，可以使用react-loadable

• 使用react-loadable项目中不同的组建
• webapck构建时会将react-loadable加载的组建打包为单独的js
• 后续所有react-loadable加载的组建，都会从cdn加载对于的js资源