JS `Rollup` `Code Splitting` (代码分割) 策略与异步加载优化

嘿，大家好！今天咱们来聊聊Rollup的Code Splitting（代码分割）策略，以及怎么用它来优化异步加载。这玩意儿听起来有点高大上，但其实就是把你的代码拆成小块，按需加载，让你的网站跑得更快更流畅。准备好了吗？咱们这就开讲！

第一部分：Code Splitting 是个啥？为啥要用它？

Code Splitting，顾名思义，就是把你的JavaScript代码分割成多个小的bundle（包）。这些bundle可以独立加载，而不是一次性加载整个应用的代码。

为啥要这么做呢？

想象一下，你的网站就像一个巨大的包裹，里面装满了各种各样的东西：首页的代码、用户设置的代码、甚至还有一些你永远不会用到的功能代码。用户每次访问你的网站，都要下载这个巨大的包裹，即使他们只需要打开其中的一小部分。这就像你只想吃块饼干，却要搬一箱饼干回家一样，浪费资源，还影响用户体验。

Code Splitting 就是解决这个问题滴！它可以把这个巨大的包裹拆成很多小包裹，用户只需要下载他们需要的那部分，大大减少了首次加载时间，提升了用户体验。

Code Splitting 的好处：

好处	描述
更快的首次加载时间	用户只需要下载他们需要的代码，而不是整个应用的代码。
更好的缓存利用率	当你更新了某个模块的代码时，只需要重新下载那个模块的bundle，而不需要重新下载整个应用的代码。
提升用户体验	更快的加载速度意味着更好的用户体验。用户更愿意停留在你的网站上，而不是因为加载速度慢而离开。
减少资源浪费	用户不需要下载他们永远不会用到的代码，减少了带宽消耗和资源浪费。

第二部分：Rollup 和 Code Splitting 的完美结合

Rollup 是一个非常优秀的 JavaScript 模块打包器。它擅长 tree shaking (摇树优化)，可以移除代码中未使用的部分，从而减少 bundle 的大小。Rollup 也原生支持 Code Splitting，让你可以轻松地将你的代码分割成多个 bundle。

Rollup 的 Code Splitting 策略主要有两种：

基于入口点的分割 (Entry Point Splitting): 这是最简单的 Code Splitting 方式。你可以为不同的入口点创建不同的 bundle。比如，你的网站有首页、登录页、注册页，你可以为每个页面创建一个独立的 bundle。
动态导入 (Dynamic Imports): 这是一种更灵活的 Code Splitting 方式。你可以使用 import() 语法来动态加载模块。当用户需要某个模块时，才会加载它，而不是在页面首次加载时就加载所有模块。

第三部分：实战演练：用 Rollup 实现 Code Splitting

接下来，咱们通过一些示例来演示如何使用 Rollup 实现 Code Splitting。

1. 基于入口点的分割 (Entry Point Splitting)

假设我们有以下目录结构：

project/
├── src/
│   ├── home.js
│   ├── login.js
│   └── register.js
├── index.html
└── rollup.config.js

home.js, login.js, register.js 分别是首页、登录页、注册页的入口文件。

rollup.config.js 配置文件如下：

import { defineConfig } from 'rollup';

export default defineConfig({
  input: {
    home: 'src/home.js',
    login: 'src/login.js',
    register: 'src/register.js'
  },
  output: {
    dir: 'dist',
    format: 'es', // 使用ES模块格式
    chunkFileNames: 'chunks/[name]-[hash].js' //设置chunk的文件名
  }
});

在这个配置文件中，input 选项指定了三个入口点：home, login, register。Rollup 会为每个入口点创建一个独立的 bundle。 output.dir 指定了输出目录，output.format 指定了输出格式为 ES 模块，output.chunkFileNames 定义了生成代码块(chunk)的文件名格式。

运行 rollup -c 命令后，Rollup 会在 dist 目录下生成以下文件：

dist/
├── home.js
├── login.js
├── register.js
└── chunks/
    ├── _commonjsHelpers-xxxxxxxx.js
    └── other-shared-module-xxxxxxxx.js

每个入口点都会生成一个对应的 js 文件，并且如果多个入口点共享了某些模块，Rollup 还会生成一些共享的 chunk 文件。

然后在 index.html 中引入这些 bundle：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my website!</h1>
  <script type="module" src="dist/home.js"></script>
</body>
</html>

2. 动态导入 (Dynamic Imports)

假设我们有一个按钮，点击按钮时才加载一个模块。

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="myButton">Load Module</button>
  <script src="dist/bundle.js"></script>
</body>
</html>

src/index.js 文件内容如下：

const button = document.getElementById('myButton');

button.addEventListener('click', async () => {
  try {
    const module = await import('./myModule.js');
    module.default(); // 执行模块的默认导出
  } catch (error) {
    console.error('Failed to load module:', error);
  }
});

src/myModule.js 文件内容如下：

export default function() {
  alert('Module loaded!');
}

rollup.config.js 配置文件如下：

import { defineConfig } from 'rollup';

export default defineConfig({
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es',
    chunkFileNames: 'chunks/[name]-[hash].js'
  }
});

在这个配置中，input 指定了入口文件为 src/index.js。 output.chunkFileNames 同样定义了生成代码块的文件名格式。

运行 rollup -c 命令后，Rollup 会在 dist 目录下生成以下文件：

dist/
├── bundle.js
└── chunks/
    └── myModule-xxxxxxxx.js

当用户点击按钮时，浏览器会动态加载 myModule.js 模块。

第四部分：异步加载优化技巧

Code Splitting 只是第一步，接下来咱们聊聊如何优化异步加载，让你的网站跑得更快。

Prefetching (预获取)

Prefetching 是一种告诉浏览器在后台下载资源的技术。当用户需要某个资源时，浏览器已经提前下载好了，可以立即使用。

你可以使用 <link rel="prefetch"> 标签来预获取资源。
```
<link rel="prefetch" href="dist/myModule.js">
```
或者，你也可以使用 JavaScript 来动态添加 prefetch 标签。
```
function prefetch(url) {
  const link = document.createElement('link');
  link.rel = 'prefetch';
  link.href = url;
  document.head.appendChild(link);
}

prefetch('dist/myModule.js');
```
使用场景： 预获取那些用户将来可能会用到的资源，比如下一个页面的代码、图片、字体等。
Preloading (预加载)

Preloading 也是一种告诉浏览器提前下载资源的技术。与 prefetching 不同的是，preloading 告诉浏览器这个资源是当前页面需要的，应该优先下载。

你可以使用 <link rel="preload"> 标签来预加载资源。
```
<link rel="preload" href="dist/myModule.js" as="script">
```
as 属性指定了资源的类型。常用的类型有 script, style, image, font 等。

使用场景： 预加载那些当前页面立即需要的资源，比如关键的 CSS 文件、字体文件等。

Lazy Loading (懒加载)

Lazy Loading 是一种延迟加载图片或其它资源的技术。当资源进入用户的视口时，才加载它。

使用场景： 懒加载图片、视频、广告等。

一个简单的图片懒加载示例：

<img data-src="image.jpg" alt="My Image" class="lazy">

const lazyImages = document.querySelectorAll('.lazy');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => {
  observer.observe(img);
});

这个示例使用了 IntersectionObserver API 来监听图片是否进入视口。当图片进入视口时，将 data-src 属性的值赋给 src 属性，从而加载图片。

使用 CDN (内容分发网络)

CDN 是一种分布式的服务器网络，可以将你的静态资源缓存到离用户更近的服务器上。当用户访问你的网站时，CDN 会从离用户最近的服务器上提供资源，从而减少延迟，提升加载速度。

使用场景： 托管静态资源，比如图片、CSS 文件、JavaScript 文件等。
代码压缩和混淆

代码压缩可以移除代码中的空格、注释等不必要的字符，从而减少文件大小。代码混淆可以将代码变得难以阅读，从而保护你的代码。

Rollup 本身也支持代码压缩和混淆。你可以使用 Rollup 的插件来实现这些功能。比如，可以使用 rollup-plugin-terser 插件来压缩和混淆代码。

第五部分：总结与展望

今天咱们聊了 Rollup 的 Code Splitting 策略以及异步加载优化技巧。希望这些知识能帮助你构建更快更流畅的网站。

记住，Code Splitting 只是一个工具，关键在于理解你的应用，找到合适的分割点，并根据你的实际情况选择合适的优化策略。

前端优化的路漫漫其修远兮，吾将上下而求索。祝大家在前端的道路上越走越远，技术越来越牛！下次有机会再和大家分享更多有趣的前端知识。拜拜！

发表回复 取消回复

发表回复取消回复