JS `Code Splitting` `Prefetch` / `Preload` / `Preconnect` 资源提示优化

各位前端的英雄好汉们，大家好！我是你们的老朋友，今天咱们来聊聊前端性能优化中，让你的网站“嗖嗖”起飞的几大法宝：JS 代码分割、prefetch、preload和preconnect。 别担心，咱们不搞学院派那一套，保证用最接地气的方式，把这些“高大上”的概念给你讲明白。

一、 代码分割（Code Splitting）：化整为零，各个击破

想象一下，你的网站就像一个巨大的蛋糕，只有一个JS文件，用户每次访问都要把整个蛋糕都吃一遍。这肯定慢啊！ 代码分割就像把蛋糕切成小块，用户只需要吃他想吃的那一块就行了。

1. 为什么需要代码分割？

• 首屏加载速度慢： 单个大型 JS 文件会导致浏览器下载、解析和执行时间过长，严重影响用户体验。
• 资源浪费： 用户可能只需要用到网站的部分功能，但却被迫下载整个 JS 文件，浪费带宽。
• 代码可维护性差： 大型 JS 文件难以维护和调试。

2. 如何进行代码分割？

代码分割的核心思想是将应用拆分成更小的、独立的模块，按需加载。 常见的实现方式有：

• 路由分割（Route-based Splitting）： 根据不同的路由加载不同的模块。 例如，在React项目中，可以使用 React.lazy 和 Suspense 实现路由懒加载。

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));
const Contact = React.lazy(() => import('./components/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

在这个例子中，Home、About 和 Contact 组件只有在对应路由被访问时才会加载。 Suspense 组件用于在加载过程中显示一个 Loading 提示。

• 组件分割（Component-based Splitting）： 将大型组件拆分成更小的、独立的组件，按需加载。 例如，一个包含大量数据的表格组件，可以将其数据获取和渲染部分进行分割。

import React, { useState, useEffect, Suspense } from 'react';

const DataFetcher = React.lazy(() => import('./DataFetcher'));

function MyTable() {
  const [showData, setShowData] = useState(false);

  return (
    <div>
      <button onClick={() => setShowData(true)}>Load Data</button>
      {showData && (
        <Suspense fallback={<div>Loading Data...</div>}>
          <DataFetcher />
        </Suspense>
      )}
    </div>
  );
}

export default MyTable;

在这个例子中，DataFetcher 组件只有在用户点击 "Load Data" 按钮后才会加载。

• Webpack Dynamic Imports： 使用 import() 语法动态加载模块。 这种方式可以在代码的任何地方进行分割，非常灵活。

async function handleClick() {
  const module = await import('./my-module');
  module.doSomething();
}

在这个例子中，my-module.js 只有在 handleClick 函数被调用时才会加载。

3. 代码分割的工具和库

• Webpack： 一个强大的模块打包工具，内置了代码分割功能。
• Rollup： 另一个流行的模块打包工具，也支持代码分割。
• Parcel： 一个零配置的打包工具，简化了代码分割的流程。
• React.lazy 和 Suspense： React 提供的代码分割 API，用于懒加载组件。

二、 prefetch：未雨绸缪，提前预加载

prefetch 是一种浏览器提示，告诉浏览器在空闲时间预先获取将来可能需要的资源。 就像在你去朋友家之前，提前把车停在路边，这样到达后就可以直接进门了。

1. 什么时候使用 prefetch？

• 用户接下来可能会访问的页面或资源： 例如，在首页预加载商品详情页的 JS 文件。
• 用户体验至关重要的资源： 例如，预加载字体文件，避免字体闪烁。

2. 如何使用 prefetch？

可以通过 <link> 标签或者 HTTP Header 使用 prefetch。

• <link> 标签：

<link rel="prefetch" href="/js/product-detail.js" as="script">
<link rel="prefetch" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• HTTP Header：

Link: </js/product-detail.js>; rel=prefetch; as=script
Link: </fonts/my-font.woff2>; rel=prefetch; as=font

3. prefetch 的注意事项

• 不要过度使用： 过多的 prefetch 会占用带宽，影响当前页面的加载速度。
• 合理设置 as 属性： as 属性告诉浏览器预加载资源的类型，有助于浏览器优化加载过程。 常见的 as 属性值包括：script、style、font、image、fetch 等。
• 考虑优先级： 浏览器会根据自身的算法决定 prefetch 资源的优先级。 可以使用 importance 属性来调整优先级（实验性特性）。

三、 preload：先下手为强，优先加载

preload 也是一种浏览器提示，告诉浏览器尽快加载当前页面需要的关键资源。 就像在你做饭之前，先把最重要的食材准备好。

1. 什么时候使用 preload？

• 当前页面渲染所需的关键资源： 例如，CSS 文件、JavaScript 文件、字体文件等。
• 延迟发现的资源： 例如，通过 CSS 加载的背景图片，或者通过 JavaScript 加载的模块。

2. 如何使用 preload？

可以通过 <link> 标签或者 HTTP Header 使用 preload。

• <link> 标签：

<link rel="preload" href="/css/style.css" as="style">
<link rel="preload" href="/js/app.js" as="script">
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• HTTP Header：

Link: </css/style.css>; rel=preload; as=style
Link: </js/app.js>; rel=preload; as=script
Link: </fonts/my-font.woff2>; rel=preload; as=font

3. preload 的注意事项

• 必须设置 as 属性： preload 必须指定 as 属性，否则浏览器会忽略该提示。
• 谨慎使用： preload 会提高资源的加载优先级，但也可能阻塞其他资源的加载。
• 考虑字体加载策略： preload 字体文件可以避免字体闪烁，但需要配合 font-display 属性使用。

四、 preconnect：铺路架桥，提前建立连接

preconnect 是一种浏览器提示，告诉浏览器提前与指定的域名建立连接。 就像在你去朋友家之前，提前打电话告诉他你快到了，让他把门打开。

1. 为什么需要 preconnect？

建立连接需要进行 DNS 查询、TCP 握手和 TLS 协商等步骤，这些步骤会消耗时间。 preconnect 可以提前完成这些步骤，减少资源加载的延迟。

2. 什么时候使用 preconnect？

• 加载第三方资源的域名： 例如，CDN 域名、字体服务域名、API 域名等。
• 用户体验至关重要的域名： 例如，图片服务器域名。

3. 如何使用 preconnect？

可以通过 <link> 标签使用 preconnect。

<link rel="preconnect" href="https://cdn.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com" crossorigin>

4. preconnect 的注意事项

• 不要过度使用： 过多的 preconnect 会消耗系统资源。
• crossorigin 属性： 如果需要加载跨域资源，必须设置 crossorigin 属性。
• dns-prefetch： dns-prefetch 只能进行 DNS 查询，而 preconnect 可以建立完整的连接。 在支持 preconnect 的浏览器中，dns-prefetch 通常没有必要。

五、 总结：四大金刚，各显神通

特性	作用	适用场景	注意事项
代码分割	将大型 JS 文件拆分成更小的模块，按需加载	大型单页应用、包含多个功能模块的应用	需要合理的模块划分策略，避免过度分割导致请求数量增加。
prefetch	告诉浏览器在空闲时间预先获取将来可能需要的资源	用户接下来可能会访问的页面或资源、用户体验至关重要的资源	不要过度使用，合理设置 as 属性，考虑优先级。
preload	告诉浏览器尽快加载当前页面需要的关键资源	当前页面渲染所需的关键资源、延迟发现的资源	必须设置 as 属性，谨慎使用，考虑字体加载策略。
preconnect	告诉浏览器提前与指定的域名建立连接	加载第三方资源的域名、用户体验至关重要的域名	不要过度使用，如果需要加载跨域资源，必须设置 crossorigin 属性。

六、 实战演练：打造极致性能的网站

现在，让我们用一个简单的例子来演示如何综合运用这些优化技巧。

假设我们有一个电商网站，包含首页、商品列表页和商品详情页。

1. 代码分割：

• 将首页、商品列表页和商品详情页的 JS 代码分别打包成独立的 chunk。
• 使用 React.lazy 和 Suspense 实现路由懒加载。

2. prefetch：

• 在首页预加载商品列表页的 JS 文件。
• 在商品列表页预加载商品详情页的 JS 文件。

3. preload：

• 在每个页面预加载关键 CSS 文件和字体文件。
• 在商品详情页预加载商品图片的域名。

4. preconnect：

• 预连接 CDN 域名，用于加载静态资源。
• 预连接 API 域名，用于获取商品数据。

通过这些优化，我们可以显著提升网站的首屏加载速度和用户体验。

七、 总结：性能优化，永无止境

前端性能优化是一个持续不断的过程，需要我们不断学习和实践。 掌握代码分割、prefetch、preload 和 preconnect 等技巧，可以帮助我们打造更加快速、流畅的用户体验。 希望今天的分享能帮助大家在性能优化的道路上更进一步。

记住，优化没有终点，只有更好！ 谢谢大家！