[toc]

1、代码分割与懒加载

• 代码分割：将应用程序拆分为多个小模块，按需加载，可以有效减少首屏加载的资源量。例如，使用 Webpack 等模块打包工具进行代码分割。在 Webpack 中，可以通过 optimization.splitChunks 配置项来实现代码分割。

• 懒加载：只在需要时才加载模块，而不是在应用启动时一次性加载所有模块。例如，在 React 中可以使用 React.lazy 和 Suspense 组件实现路由级别的懒加载：

  const Home = React.lazy(() => import('./Home'));
  const About = React.lazy(() => import('./About'));
  
  function App() {
    return (
      <React.Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </React.Suspense>
    );
  }

  在 Vue 3 中，可以使用动态 import() 语法来实现代码分割和懒加载：

  const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
  const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

2、Gzip

• 定义：Gzip 是一种压缩算法，用于在服务器端压缩文件（如 HTML、CSS、JavaScript），并通过 Content-Encoding 头部告知浏览器解压缩。
• 优化效果：Gzip 压缩可以显著减少传输数据量，加快加载速度。例如，在 Nginx 服务器中，可以通过配置 gzip on; 来开启 Gzip 压缩。

3、缓存策略

• 浏览器缓存：使用 HTTP 缓存头（如 Cache-Control 和 Expires）设置合理的缓存策略。例如，可以通过设置 Cache-Control: max-age=3600 来指定资源在 3600 秒内可以直接使用缓存。
• 服务端缓存：使用缓存服务器（如 Varnish、Nginx）来缓存静态资源。CDN（内容分发网络）也可以将网站的静态资源缓存到离用户最近的节点上，减少请求的响应时间。

4、骨架屏

• 骨架屏：在页面加载时展示占位内容，提升用户体验。例如，可以使用简单的 HTML 和 CSS 创建骨架屏。骨架屏可以快速展示页面的基本结构，让用户感知到页面正在加载。

5、Tree-shaking

• 定义：Tree-shaking 是一种通过消除未使用的代码来优化打包体积的技术。它依赖于 ES2015 模块语法的静态结构（import 和 export），通过分析模块的导入和导出，移除未使用的代码。
• 优化效果：Tree-shaking 可以显著减少打包体积，提升加载速度。例如，在 Webpack 中可以通过配置 mode: 'production' 来启用 Tree-shaking。

6、 HTTP/2

• 定义：HTTP/2 是 HTTP 协议的第二代版本，旨在解决 HTTP/1.x 的性能瓶颈问题。
• 主要特性：多路复用、服务器推送、头部压缩。
• 优化效果：提高页面加载速度，减少延迟。

7、服务端渲染（SSR）

• SSR 技术：使用服务端渲染技术（如 Next.js、Nuxt.js）提前生成 HTML，减少客户端的首次渲染时间。

8、优化第三方脚本

• 异步加载：尽量减少第三方脚本的使用，或者将它们异步加载，避免阻塞主资源的加载。例如，使用 async 或 defer 属性。

  <script src="script.js" async></script>

9、预加载和预读取

• 预加载：使用 <link rel="preload"> 提示浏览器立即加载关键资源。

• 预读取：使用 <link rel="prefetch"> 提示浏览器在空闲时加载未来可能需要的资源。

  <link rel="preload" href="styles.css" as="style">
  <link rel="prefetch" href="next-page.html">