如何提高首屏加载时间.md

使用SSR

减少首屏css，javascript，html的大小

代码分割

通过代码分割，在首屏时只下载必须得css，js

动态引入

Webpack这样的模块打包器支持的特性，按需加载JavaScript模块，而非一次性加载完整的bundle。 从实践解释就是，Dynamic Imports，当用户没有点击这个弹框的时候，就不现在这个modal所需的js文件

import Loadable from "react-loadable";

export LazyLoading = (loader, delay = 300) =>
  Loadable({
    loader,
    loading: Loading,
    delay,
  });

export default LazyLoading(
  () =>
    import(
      /* webpackChunkName: "component" */ "./Component"
    )
);

路由级分割

对于单页应用（SPA），可以使用如React Router这样的库来实现基于路由的代码分割，仅加载用户当前需要的资源。

React.lazy() 函数，可以用于按需加载路由组件。通过使用 React.lazy() 和动态导入语法，React Router 可以将每个路由组件作为独立的模块进行分割，从而实现路由分割的效果。

压缩资源

通过压缩资源，减小css，javascript的大小

优化图片资源

1. 使用现代格式（如WebP），并根据设备尺寸加载适合大小的图片
2. 使用SVG
3. 懒加载： 对于非首屏的图片、视频等媒体内容，可以采用懒加载策略，即在需要显示时再加载。

缓存相关

浏览器缓存

CDN缓存