mipengine/mip

关于mip引入组件js的想法和建议

Closed this issue · 5 comments

yugasun commented

目前在使用mip是，页面中如果需要使用一些个性化组件需要引入各种js来支持，像下面一样：

<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-gototop/mip-gototop.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-fixed/mip-fixed.js"></script>

而且这些很长的 js 的 url，需要手动复制粘贴，既然是基于组件化的，那么是否可以借鉴下 requirejs，直接在 <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> 标签上直接配置引入组件，如下：

<script src="https://mipcache.bdstatic.com/static/v1/mip.js" data-components="nav-slidedown,gototop,fixed"></script>

这样页面在加载的时候，直接根据 data-components 属性，自动人引入相关组件，会不会更优雅点，以上只是一点小小的建议。

nimoc commented

最好还是静态资源服务支持 combo 减少请求数

https://mipcache.bdstatic.com/static/v1/??mip-nav-slidedown/mip.js,mip-nav-slidedown.js,mip-gototop/mip-gototop.js,mip-fixed/mip-fixed.js

再优化成直接访问目录下同名文件或者 index 文件更好

https://mipcache.bdstatic.com/static/v1/??mip-nav-slidedown/mip.js,mip-nav-slidedown,mip-gototop,mip-fixed
xuexb commented

静态资源服务支持 combo 减少请求数

👍 感谢这么好的建议，我们内部先沟通下方案，有进展了同步~
@yugasun @nimojs

xuexb commented

我想到的是：

  1. HTTP2
  2. 在运行层做请求数合并，如 @nimojs 说的 http-concat 服务，并且这个应该是透明的，开发的时候还是写多个 <script> ，在线上需要无缝的合并
jennyliang220 commented

补充两点，在开发者编写页面这个流程减少网络请求。

  1. 可以根据组件引用量排序，直接打包TOP10 常用MIP组件为 mip-ext-top10.js ，如mip-stats-baidu, mip-fixed, mip-form, mip-lightbox等。
  2. 增加MIP校验，引用的JS一定要使用。极端JS引用示例参考：https://easycloud.im/
Summer05246 commented

组件脚本的引用最好有个版本控制，而不是只能使用最新的脚本，比如<script src="https://mipcache.bdstatic.com/static/v1/mip-fixed/mip-fixed-2.4.5.js"></script>
应为有些页面代码已经固定了，运行顺畅，如果版本的更新，那我需要对所有引用该脚本的页面进行检查，其次如果代码不适合以前的页面，我连回滚的能力都没有。就是做到我想要什么版本就用什么版本的脚本那就最好了