• OpenAI API：新用户注册可获得免费调用额度，支持文本生成、代码补全等多种AI能力，适合学习Web应用中AI功能的集成逻辑。
• Google Gemini API：提供免费使用层级，支持文本、图像、音频的多模态交互，配套文档完善，适合入门多模态AI应用开发。
• Anthropic Claude API：有免费试用额度，擅长长文本处理场景，适合学习构建需要处理大量文本内容的Web应用。
• Hugging Face Inference API：免费额度内可调用海量开源AI模型（如BERT、Stable Diffusion等），还支持自定义模型部署，适合学习开源AI模型的集成方法。
• 开源本地部署API：比如LLaMA、Mistral这类开源大模型，可本地部署后提供API接口，完全免费且无调用限制，适合深入理解AI API的底层运行机制。

代码优化 #

• 代码分割：用Webpack、Vite这类打包工具的代码分割功能，把代码拆分成多个小chunk，只加载当前页面需要的代码，降低初始加载体积。比如在Vite里配置build.rollupOptions.output.manualChunks拆分第三方依赖。
• Tree Shaking：确保打包工具启用Tree Shaking，移除未被使用的代码和依赖。注意要使用ES模块的import/export语法，避免CommonJS模块影响优化效果。
• 清理冗余依赖：定期清理项目里没用到的npm包，执行npm prune移除package.json里未声明的依赖，减少打包后的文件体积。

资源压缩 #

• 静态资源压缩：JS文件用Terser压缩，CSS文件用CSSNano压缩；图片优先用WebP/AVIF格式，通过sharp、Squoosh这类工具压缩体积，同时保留足够清晰度。
• 字体优化：使用字体子集化（只保留项目用到的字符），或者采用系统字体栈，减少字体文件的加载体积。

请求与缓存优化 #

• API请求优化：把多个小请求合并成一个，减少HTTP握手开销；对搜索输入这类高频触发的请求用防抖（debounce）或节流（throttle），避免不必要的调用；用localStorage或内存缓存API响应结果，重复请求直接读缓存。
• HTTP缓存配置：设置Cache-Control、ETag等响应头，让浏览器缓存静态资源，减少重复下载。不常更新的资源设较长缓存过期时间，更新资源时用哈希命名（比如app.abc123.js），确保用户拿到最新版本。
• 懒加载：图片用loading="lazy"属性实现懒加载，非首屏路由组件用React的React.lazy+Suspense这类方案懒加载，减少初始加载的资源请求量。

内容的提问来源于stack exchange，提问作者Franzcon