# 项目
# Next.js 主项目
- 为什么要去重构
- 重构是如何考虑
- 项目是如何从4s优化到1.5s的
白屏FP:1秒 FCP:1.2秒 FMP:1.5秒
# 低代码活动平台
- 为什么要做活动平台
- 技术服务业务,运营活动提效
- 提高产研效率
- 技术突破边界
- 尝试low code 技术
# SSR项目遇到的问题
- 缓存设计 考虑不应该缓存用户数据
- node中无window环境
- node SSR压力
- 白屏TTFB的时间
# 项目中遇到的难点,是如何解决的
分析:可以结合项目的实际情况,比如性能优化,数据埋点,工程化实践等等
- 性能优化 首屏FCP 4s -> 1s
- 活动平台
- RN框架
# 项目是如何做到 4s -> 1s的
第一步:
- 添加监控 使用阿里云的ARMS
- Next.js 重构解决的问题资源打包太大,同时也解决了热更新开发效率的问题
- 添加的Node.js的缓存(二级缓存)
第二步:做了一系列的优化
- 打包大小优化,替换一些工具库,按需加载的
- 重构已有的一些三方库,使用peerDependency 统一版本 使用
babel-plugin-import
- CDN优化 找阿里云的同事
- 字体优化
- 图片优化
- 懒加载
- webp
- 小图加载优化,渐进加载
- 翻译文件优化
- 三方js的统一合并
- 接口调优,内网域名请求
- node.js 中间件逻辑优化
# 项目待提升的点
- 无损发布
- 缓存更新 实时更新
- 翻译问题 翻译拆分
- 缓存兜底
- 网络优化
- 服务端优化
- SEO定时更新
# 其他
- 项目的html的缓存时间是多久,用的强缓存还是协商缓存
5分钟,强缓存如果有问题的话 可以用协商缓存
项目的国际化是如何做的
国际化项目的挑战有哪些
- 多语言多地区多运营
- 翻译问题
- 数据合规 数据安全
- 支付问题 原生Apple pay/Google pay credit card(stripe) Paypal wechat pay
- 性能问题 弱网
- UI设计
- Next.js有哪些特性
- 支持css module
- 支持typescript
- 支持自定义服务器逻辑
- 支持Fast refresh
- 路由页面快速添加
- 支持 服务端SSR渲染 支持静态渲染
- 预加载 prefetch
- 支持google AMP技术
- 低代码平台是如何做拖拽的
- react-dnd (拖拽)
- 低代码平台是如何做热区的
- interactjs (划定区域)