项目总结：构建和开发基于preact技术栈的移动端工程
ZhenHe17 opened this issue · comments
项目背景
本文主要记录下项目过程，也对项目做一个总结
- 开发用于移动端app内的h5页面
- 多语言文本（33种语言）
分析项目特点
由于是用于移动端app的页面，大致有以下几个需要注意的点：
1.体积尽可能轻量
2.不需要注意老浏览器的兼容问题
3.需要注意不同屏幕尺寸、不同机型的显示差异
4.需要注意安卓端和IOS端的差异
技术栈选择
主要技术栈
因为之前有react的开发经验、且react的社区成熟又丰富，所以考虑使用react相关的技术栈。又因为体积尽可能轻而选择了preact。preact打包后仅3kb，技术栈风格注重轻量简洁，在使用preact-compat后能达到近乎和react一样的开发体验、使用绝大多数社区中成熟的react轮子。所以preact技术栈很适合这个项目。
css相关
- css预处理器选择了less
- 栅格化布局选择了bootstrap-grid，由于12等分的布局有所局限，所以修改了官方仓库的参数，打包了一个24等分且没有gutter的版本，约27kb
- css reset使用了minireset.css，约0.5kb
- 使用rem作为单位，根据屏幕的宽和设备dpr调整显示比例（rem.js）。
其他辅助库
- 在ajax请求上使用了axios
- 辅助函数库使用了lodash，因为使用时是按需加载，所以对打包体积影响很小
其它注意事项
- preact与react的不同
- 按需载入多语言文本
- 根据语言，使用webpack中的require（AMD规范）引入对应文本。此时webpack会对每个语言的文本打出单独的包，在确定语言时按需加载对应文本。文本通过preact-redux传到每个页面的props中使用。
- IOS的滚动容器应加上
-webkit-overflow-scrolling: touch; - 弹窗下的滚动穿透 解决方案
总结
在这套技术栈下的开发体验良好，最终生产环境的js包大小约280kb，加载完资源（load）到页面展示（finish）约0.3秒，在网络畅通的环境下能够在1~2秒内展示出页面，效果较为满意。对项目的依赖库都有所考量，希望能给大家带来参考价值。
欢迎讨论^_^