项目总结：构建和开发基于preact技术栈的移动端工程

[ZhenHe17]

项目背景

本文主要记录下项目过程，也对项目做一个总结

• 开发用于移动端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的不同
  • 与 React 的不同之处
  • 如何看待 React 的替代框架 Preact？
  • 用 Preact 替换 React
• 按需载入多语言文本
  • 根据语言，使用webpack中的require（AMD规范）引入对应文本。此时webpack会对每个语言的文本打出单独的包，在确定语言时按需加载对应文本。文本通过preact-redux传到每个页面的props中使用。
• IOS的滚动容器应加上 -webkit-overflow-scrolling: touch;
• 弹窗下的滚动穿透 解决方案

总结

在这套技术栈下的开发体验良好，最终生产环境的js包大小约280kb，加载完资源（load）到页面展示（finish）约0.3秒，在网络畅通的环境下能够在1~2秒内展示出页面，效果较为满意。对项目的依赖库都有所考量，希望能给大家带来参考价值。

欢迎讨论^_^