# 项目

# Next.js 主项目

  1. 为什么要去重构
  2. 重构是如何考虑
  3. 项目是如何从4s优化到1.5s的

白屏FP:1秒 FCP:1.2秒 FMP:1.5秒

# 低代码活动平台

  1. 为什么要做活动平台
  • 技术服务业务,运营活动提效
  • 提高产研效率
  1. 技术突破边界
  • 尝试low code 技术

# SSR项目遇到的问题

  1. 缓存设计 考虑不应该缓存用户数据
  2. node中无window环境
  3. node SSR压力
  4. 白屏TTFB的时间

# 项目中遇到的难点,是如何解决的

分析:可以结合项目的实际情况,比如性能优化,数据埋点,工程化实践等等

  • 性能优化 首屏FCP 4s -> 1s
  • 活动平台
  • RN框架

# 项目是如何做到 4s -> 1s的

第一步:

  • 添加监控 使用阿里云的ARMS
  • Next.js 重构解决的问题资源打包太大,同时也解决了热更新开发效率的问题
  • 添加的Node.js的缓存(二级缓存)

第二步:做了一系列的优化

  1. 打包大小优化,替换一些工具库,按需加载的
  2. 重构已有的一些三方库,使用peerDependency 统一版本 使用babel-plugin-import
  3. CDN优化 找阿里云的同事
  4. 字体优化
  5. 图片优化
  • 懒加载
  • webp
  • 小图加载优化,渐进加载
  1. 翻译文件优化
  2. 三方js的统一合并
  3. 接口调优,内网域名请求
  4. node.js 中间件逻辑优化

# 项目待提升的点

  1. 无损发布
  2. 缓存更新 实时更新
  3. 翻译问题 翻译拆分
  4. 缓存兜底
  5. 网络优化
  6. 服务端优化
  7. SEO定时更新

# 其他

  1. 项目的html的缓存时间是多久,用的强缓存还是协商缓存

5分钟,强缓存如果有问题的话 可以用协商缓存

  1. 项目的国际化是如何做的

  2. 国际化项目的挑战有哪些

  • 多语言多地区多运营
  • 翻译问题
  • 数据合规 数据安全
  • 支付问题 原生Apple pay/Google pay credit card(stripe) Paypal wechat pay
  • 性能问题 弱网
  • UI设计
  1. Next.js有哪些特性
  • 支持css module
  • 支持typescript
  • 支持自定义服务器逻辑
  • 支持Fast refresh
  • 路由页面快速添加
  • 支持 服务端SSR渲染 支持静态渲染
  • 预加载 prefetch
  • 支持google AMP技术
  1. 低代码平台是如何做拖拽的
  • react-dnd (拖拽)
  1. 低代码平台是如何做热区的
  • interactjs (划定区域)
陕ICP备20004732号-3