Open PengXing opened 6 years ago
静态资源加载分为下面几步:
但是,这样的步骤里有一个问题,传统的网站上,直出的 HTML 里引用 JS 的时候会带上版本号或者 hash,而 MIP HTML 并没有这个东西,那么,怎么保证每次获取到的 JS 都是最新版,如果开发者通过 mip2 publish
发布了一个对已有组件的更新呢。
MIP1 的解决方法大概是这样:
max-age=600
,也就是 10minMIP2 和 MIP1 不一样,MIP2 面向的是复杂站点,如电商,如果线上的 MIP2 的组件有 bug,往往是不能等的,需要立刻上线修复问题,否则影响会比较大,因此,我们需要一种方法能让站长能够在发布组件之后,立刻更新 JS 版本。
我们可以提供两种机制
MIP2.0 初期先不考虑这个问题,还是延用 MIP1.0 的静态资源管理方式
在页面里面插入多个 js 文件
<script src="//mipcdn.cn/some/path/mip-a.js"></script>
<script src="//mipcdn.cn/some/path/mip-b.js"></script>
这个 script 也可以不用站长来写,通过 js 扫描当前 HTML 中有哪些 MIP 标签动态插入
MIP2.0 后期才考虑优化 JS 的加载问题。
OVER.
这个优化前期基于MIP Cache来做是不是好一点? 前端的动态合并要考虑的东西挺多的,我们可以再多讨论一下可行性。
MIP 2.0 静态资源加载方案
背景
用户在开发组件的时候会引用第三方开源项目,项目公用资源(如utils、图片、字体等)、组件相互依赖等问题,在发布组件的时候如果将每个组件依赖到的资源全部 bundle 成一个 js,会造成严重的代码冗余问题,也破坏掉组件间依赖某些单实例(如 eventbus)进行数据传递的机制,因此需要更改组件打包方案,并且设计新的静态资源加载机制去解决这些问题。
组件打包方案设计
组件的打包流程为:
.vue
文件编译成.js
文件,不会将依赖的资源给 bundle 进来;.js
文件进行 babel 转码处理;.js
文件以 amd 模块的形式进行封装;至此,所有的静态资源将以 amd 模块的方式使用,组件上线时,静态资源全部上传 cdn。
静态资源加载
MIP core 通过当前页面使用哪些组件,动态请求组件资源,模块载入框架考虑使用 esl。在 amd 模式下会造成前端大量请求 js 资源的问题,因此考虑引入 jet 来实现请求 combo。
jet 服务接入
需要考虑的问题: