如何加速Azure Web Apps上部署的React应用客户端加载速度

15秒的加载耗时基本是Azure Web Apps冷启动+静态资源无压缩无缓存导致的，以下是不需要拆分前后端部署的可落地优化方案：

• 优化Express静态资源服务配置
  先安装compression中间件开启全局gzip/brotli压缩，大幅降低资源传输体积，再给静态资源加合理的缓存规则：
  1. 安装依赖：npm install compression
  2. 修改server.js代码：

  const compression = require('compression')
  // 放在所有路由、中间件定义的最顶部
  app.use(compression())
  
  // 所有API路由必须放在静态资源配置之前定义，避免被拦截
  
  // Set static folder
  const __dirname = path.resolve();
  app.use(express.static(path.join(__dirname, "public"), {
    maxAge: '7d' // public目录资源缓存7天
  }));
  
  if (process.env.NODE_ENV === "production") {
    // 带哈希后缀的js/css/图片等资源设置1年长期缓存，文件名更新时缓存自动失效
    app.use(express.static(path.join(__dirname, "/client/build"), {
      maxAge: '1y',
      index: false // 禁止自动返回index.html，交给下方通配路由处理
    }));
    // html文件不设置缓存，保证版本更新后用户能立即拿到最新页面
    app.get("*", (req, res) =>
      res.sendFile(path.resolve(__dirname, "client", "build", "index.html"), {
        maxAge: 0
      })
    );
  } else {
    app.get("/", (req, res) => {
      res.send("API is running...");
    });
  }
  

• 调整Azure Web Apps配置消除冷启动
  1. 开启Always On：进入Azure门户对应Web Apps的「配置」-「通用设置」页面，将Always On选项设为开启，可避免实例长时间无访问被系统回收，消除冷启动耗时（免费/共享层实例不支持该功能，需要至少升级到B1层）
  2. 开启Azure内置静态内容压缩：在配置页开启gzip、brotli压缩，比Node服务自行压缩性能更高
  3. 确认Web Apps部署区域和你的核心访问用户区域一致，避免跨区域网络传输增加额外耗时
• 优化React构建产物体积
  1. 确认部署的是npm run build生成的生产环境产物，不要部署开发环境启动的服务
  2. 不需要线上调试的话，在React项目根目录的.env文件中添加GENERATE_SOURCEMAP=false，关闭sourcemap生成，可大幅减小产物体积
  3. 后续功能迭代时做好代码分割，用React.lazy按需加载非首屏组件，降低首屏需要加载的资源大小
• 补充优化
  可以将client/build目录下的静态资源直接放到Azure Web Apps的wwwroot/public目录，让Azure直接处理静态资源请求，不需要经过Node进程转发，性能会更高，仅需调整express.static的路径指向对应目录即可。

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