构建工具、屏幕适配、可视化与跨端方案。

一、构建与样式

Vite

Vite 用原生 ESM 做开发服务器，按需编译，冷启动通常明显快于传统打包。生产构建默认走 Rollup，插件接口统一。适合 Vue、React 等现代脚手架，对 CommonJS 老包有时需要额外适配。

环境变量以 VITE_ 前缀暴露给客户端，不要把密钥塞进去。依赖预构建会把 node_modules 转成 ESM 缓存，缓存异常时删除再启。SSR 和库模式要单独看输出格式。

迁移存量 Webpack 项目时，先对齐别名、静态资源和环境注入，再处理特殊 loader。构建快不是唯一目标，产物体积和兼容性仍要测。

WebPack

Webpack 是可高度定制的前端打包器，用 loader 处理各类资源，用 plugin 干预构建生命周期。它适合复杂的多入口、微前端和需要精细拆包的存量项目，配置学习曲线也更陡。

性能优化常见手段是持久化缓存、缩小解析范围和合理 code split。Source map 策略在开发和生产要分开，避免把源码明文丢到公网。构建时间过长时先画依赖图，再决定是不是该迁到更轻的工具。

新项目未必从 Webpack 起步，但读懂它的模块图和运行时，对排查循环依赖和重复打包仍然很有用。

Tailwind css

Tailwind CSS 用原子类在 HTML 里拼样式：间距、颜色、断点都是预定义 token。构建时扫描模板，只打包用到的类，所以线上 CSS 很小。它适合设计系统已经收敛、希望少写自定义 CSS 的团队。和组件库结合时，变体用 class 组合而不是深层选择器。

要克制任意值，优先用配置里的间距和色板，否则设计会再次发散。复杂动画或一次性布局可以抽成小组件。与 CSS Modules 混用时约定边界，避免两套命名。v4 的引擎更快，升级要看自定义插件。可读性靠组件拆分，而不是把二十个类塞进一行还拒绝抽取。Tailwind 是约束，不是把内联样式合法化。

二、适配与显示

H5屏幕适配

H5 屏幕适配要在不同宽度、像素密度和全面屏上保持布局可读。常见手段是 viewport、弹性布局、媒体查询，以及按设计稿宽度做 rem / vw 缩放。先保证可用，再追求和设计稿像素级一致。

1px 发丝线在高 DPR 上要用变换或边框方案。安全区（刘海、底部横条）用 env(safe-area-inset-*)。字体不要随 vw 无限缩小。图片用 srcset，避免大图直接拉伸。横竖屏切换要复测表单和固定底栏。能用 Flex/Grid 解决的不要用绝对定位铺满。真机测 iOS 微信内置浏览器，那里的差异往往比桌面 Chrome 更多。

Retina显示屏

Retina 显示屏把物理像素做得更密，使在正常视距下不易分辨单个像素。对开发者，它意味着 1 点对应 2× 或 3× 像素，切图要提供 @2x/@3x，否则发虚。

Web 上用 devicePixelRatio 和 srcset 提供高分辨率资源；iOS 用 point 布局而不是裸像素。位图放大不能替代多套资源。矢量图标和 PDF/SVG 更省事。调试时在模拟器切换倍率，检查 1 像素发丝线和字体渲染。性能上 3× 图内存占用显著，列表里要缓存和尺寸约束。设计稿按点标注，开发按点实现，最后再导出多倍图。

三、数据可视化

Apache Echarts

Apache ECharts 是开源的可视化库，覆盖折线、柱状、散点、地图、关系图等常见业务图表。配置项以 option 对象驱动，数据、坐标轴、图例和提示框可以分开声明，适合后台报表和运营看板。

大数据量时要控制采样、关闭不必要的动画，并用 dataset 统一喂数，避免每个 series 重复拷贝。移动端还要处理触摸缩放与容器尺寸变化，否则图表会挤压或留白。

二次封装时把主题色、字体和空状态做成统一组件，业务侧只传指标定义。这样改皮肤不必翻遍页面，也方便和后端的聚合接口对齐口径。

Three.js

Three.js 把 WebGL 封装成场景、相机、网格和灯光，让浏览器里能较快搭出 3D 演示。模型用 GLTF 导入，材质走 PBR，控制器负责旋转缩放，适合产品展示、数字孪生和轻量交互。

性能瓶颈常出现在三角面过多、贴图过大和每帧创建对象。上线前要合并几何体、压缩纹理、复用材质，并在低端机下调阴影与抗锯齿。移动端还要注意像素比，避免视网膜屏把 GPU 打满。

业务集成时把渲染循环与 UI 状态解耦：界面改参数，场景只消费快照。这样热更新配置不会把动画卡死，也方便做截图和导出。

四、跨端与路由

微信小程序开发

微信小程序跑在微信容器里，用 WXML / WXSS / JS 组织页面，通过一套受限 API 访问登录、支付、定位和云开发。它适合触达已有微信用户，审核和性能配额都比原生 App 更紧。

开发时把业务拆成独立分包，控制主包体积。登录态走 code 换 session，不要把密钥写进前端。真机预览与开发者工具的差异主要在网络和权限，发布前用体验版走完支付与分享。云函数适合轻量后端，复杂域仍应自建服务。注意隐私协议与用户信息收集清单，审核被拒多半出在未声明的接口调用。

React Native

React Native 用 JavaScript 描述界面，再桥接到原生控件。新架构下的 Fabric 与 JSI 减少了老桥的异步序列化成本，使列表和手势更接近原生。适合需要一套代码覆盖 iOS / Android、同时保留原生能力的团队。

选型时要评估原生模块数量：地图、支付、推送仍可能写平台代码。调试用 Flipper 或官方 DevTools，发布前关闭远程 JS 调试。版本升级往往卡在第三方库，应锁定 RN 版本并有回归设备清单。性能问题优先查 JS 线程阻塞和多余 re-render，而不是一上来就重写原生。能用 Expo 就减少原生工程维护，需要深度定制再 eject。

React Router v7

React Router v7 把数据路由、loader/action 和框架约定收得更紧，既可当库嵌进现有 React 应用，也能走全栈框架模式。路由表声明路径、懒加载和错误边界，导航与数据获取可以同一次往返完成。

loader 里做读、action 里做写，表单提交不必再手写一堆 useEffect。注意缓存与重校验时机，避免返回键看到过期数据。嵌套路由的布局层不要重复拉同一份用户信息。

升级时核对未来标志、相对路径和滚动恢复行为。类型生成能减少字符串路径拼写错误，值得在中型以上项目打开。