JS `Rollup` `Code Splitting` `Chunking` 策略与 `Dynamic Imports`

各位观众老爷们，大家好！今天咱们聊聊前端工程化里头，让人又爱又恨的 Rollup，还有它的好基友：Code Splitting 和 Dynamic Imports。保证让你们听完之后，感觉自己好像也成了前端架构师，能指点江山了（至少能忽悠一下面试官）。

Rollup：打包界的“小而美”

话说前端发展到现在，代码量是蹭蹭往上涨。你写个 Hello World 可能都得依赖几百个 npm 包。这些代码一股脑塞给浏览器，浏览器直接罢工给你看。所以，我们需要打包工具，把这些代码整理整理，压缩压缩，变成浏览器能高效执行的东西。

市面上打包工具一大堆，Webpack, Parcel, Rollup。咱们今天的主角是 Rollup。

Rollup 的特点是啥？ “小而美”。它专注于 JavaScript Library 的打包。它的核心思想是 Tree Shaking。啥是 Tree Shaking？简单说就是把你代码里没用到的东西，统统砍掉！就像给树修剪枝叶一样，所以叫 Tree Shaking。

Webpack 也能 Tree Shaking，但 Rollup 在这方面做得更彻底，更 aggressive。

Code Splitting：化整为零的艺术

咱们辛辛苦苦把代码打包好了，但是用户打开网页，还是得把整个 bundle 下载下来，才能开始跑。如果你的应用很大，这个 bundle 可能有好几 MB，用户得等半天才能看到东西，体验贼差。

这时候， Code Splitting 就闪亮登场了。它的思想是把一个大的 bundle 拆成多个小的 chunks。这样，用户只需要下载当前页面需要的 chunk，其他 chunk 可以按需加载。

Code Splitting 的好处显而易见：

减少首次加载时间：用户不用下载整个应用，只需要下载当前页面需要的代码。
提高缓存利用率：修改一个小的模块，只需要更新对应的 chunk，其他 chunk 可以继续使用缓存。
优化资源加载顺序：可以优先加载关键资源，保证用户体验。

Dynamic Imports：按需加载的秘密武器

Code Splitting 的实现方式有很多种，其中最优雅的方式就是使用 Dynamic Imports。

Dynamic Imports 是 ES Modules 的一个特性，允许你像导入一个函数一样导入一个模块。它的语法是 import('module')。

注意， import() 返回的是一个 Promise。这意味着你可以异步地加载模块。

// 静态导入
import { add } from './math';

// 动态导入
async function loadMath() {
  const { add } = await import('./math');
  console.log(add(2, 3));
}

loadMath();

Dynamic Imports 和 Code Splitting 简直是天作之合。你可以用 Dynamic Imports 来分割你的代码，然后 Rollup 会自动地把你的代码拆分成多个 chunks。

Rollup + Code Splitting + Dynamic Imports：最佳实践

说了这么多理论，咱们来点实际的。看看怎么用 Rollup + Code Splitting + Dynamic Imports 来优化我们的项目。

安装 Rollup 和相关插件

首先，你需要安装 Rollup 和一些常用的插件。

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel --save-dev

@rollup/plugin-node-resolve: 用于解析 node_modules 里的模块。
@rollup/plugin-commonjs: 用于将 CommonJS 模块转换为 ES Modules。
@rollup/plugin-babel: 用于使用 Babel 转换代码。

配置 Rollup

创建一个 rollup.config.js 文件，配置 Rollup 的打包选项。

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es',
    sourcemap: true,
    chunkFileNames: '[name]-[hash].js' // 设置 chunk 文件名
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    })
  ],
  manualChunks: { // 手动配置 chunk
    vendor: ['lodash']
  }
};

解释一下几个重要的配置项：

input: 入口文件。
output.dir: 输出目录。
output.format: 输出格式。这里使用 es，表示输出 ES Modules。
output.sourcemap: 生成 sourcemap 文件，方便调试。
output.chunkFileNames: 设置 chunk 文件名。 [name] 表示 chunk 的名称， [hash] 表示 chunk 的 hash 值。
plugins: 使用的插件。
manualChunks: 手动配置 chunk，把 lodash 打包成一个单独的 chunk。

使用 Dynamic Imports

在你的代码中使用 Dynamic Imports 来加载模块。

// src/index.js
async function loadComponent() {
  const { default: component } = await import('./component');
  document.body.appendChild(component());
}

loadComponent();

// src/component.js
import _ from 'lodash';

export default function createComponent() {
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'Rollup!'], ' ');
  return element;
}

运行 Rollup

在命令行运行 Rollup。

rollup -c

Rollup 会根据你的配置，把你的代码打包成多个 chunks，并输出到 dist 目录。

在 HTML 中加载 chunks

在你的 HTML 文件中，加载 Rollup 生成的 chunks。

<!DOCTYPE html>
<html>
<head>
  <title>Rollup Demo</title>
</head>
<body>
  <script type="module" src="dist/index.js"></script>
</body>
</html>

注意，你需要使用 <script type="module"> 来加载 ES Modules。

Chunking 策略：如何优雅地分割代码

Code Splitting 的关键在于如何分割代码。分割得好，可以有效地减少首次加载时间，提高缓存利用率。分割得不好，反而会增加请求数量，降低性能。

常见的 Chunking 策略有以下几种：

Entry Point Splitting：把每个入口文件都打包成一个单独的 chunk。适用于多页面应用。
Dynamic Imports Splitting：使用 Dynamic Imports 来分割代码， Rollup 会自动地把 Dynamic Imports 导入的模块打包成一个单独的 chunk。适用于单页面应用。
Vendor Splitting：把第三方库打包成一个单独的 chunk。这样，修改业务代码不会影响第三方库的缓存。
Manual Chunking：手动配置 chunk，把一些公共模块打包成一个单独的 chunk。

策略	优点	缺点	适用场景
Entry Point	简单易用，适用于多页面应用	Chunk 数量可能过多	多页面应用，每个页面有独立的入口文件
Dynamic Imports	灵活，可以按需加载模块	需要修改代码，增加 Dynamic Imports	单页面应用，需要按需加载模块
Vendor Splitting	提高缓存利用率，减少重复下载	配置稍微复杂	通用，适用于任何项目，特别是使用了大量第三方库的项目
Manual Chunking	可以灵活地控制 chunk 的内容	需要对代码结构有深入的了解	需要对特定模块进行优化，例如把一些公共模块打包成一个单独的 chunk

高级技巧： Rollup 插件开发

Rollup 的强大之处在于它的插件系统。你可以通过开发插件来扩展 Rollup 的功能。

一个 Rollup 插件就是一个简单的 JavaScript 函数，它接收 Rollup 的配置作为参数，并返回一个包含各种钩子的对象。

常见的钩子有：

options: 在 Rollup 开始打包之前调用。你可以在这里修改 Rollup 的配置。
buildStart: 在 Rollup 开始构建之前调用。你可以在这里做一些初始化操作。
resolveId: 在 Rollup 解析模块 ID 之前调用。你可以在这里修改模块 ID。
load: 在 Rollup 加载模块内容之前调用。你可以在这里修改模块内容。
transform: 在 Rollup 转换模块内容之后调用。你可以在这里修改模块内容。
renderChunk: 在 Rollup 生成 chunk 之后调用。你可以在这里修改 chunk 的内容。
writeBundle: 在 Rollup 完成打包之后调用。你可以在这里做一些清理操作。

举个例子，我们可以开发一个简单的 Rollup 插件，用来给代码添加版权信息。

// rollup-plugin-banner.js
export default function banner(options) {
  return {
    name: 'banner',
    renderChunk(code) {
      const banner = `/*
      * Copyright (c) ${new Date().getFullYear()} Your Name
      */
      `;
      return banner + code;
    }
  };
}

然后在 rollup.config.js 中使用这个插件。

// rollup.config.js
import banner from './rollup-plugin-banner';

export default {
  // ...
  plugins: [
    // ...
    banner({
      author: 'Your Name'
    })
  ]
};

性能优化：让你的代码飞起来

Code Splitting 和 Dynamic Imports 只是性能优化的第一步。还有很多其他的技巧可以用来优化你的代码。

压缩代码：使用 Terser 等工具压缩代码，减少代码体积。
使用 CDN：将静态资源放到 CDN 上，提高加载速度。
开启 Gzip 压缩：使用 Gzip 压缩传输的代码，减少传输体积。
使用 HTTP/2：使用 HTTP/2 协议，提高并发请求能力。
优化图片：使用 WebP 等格式，压缩图片体积。
懒加载图片：使用 Intersection Observer API 实现图片懒加载。
代码审查：定期进行代码审查，发现并修复性能问题。

Rollup 的局限性

虽然 Rollup 很强大，但它也有一些局限性。

对 CommonJS 的支持不如 Webpack： Rollup 对 CommonJS 的支持需要借助插件，而且可能会有一些兼容性问题。
生态不如 Webpack： Rollup 的插件生态不如 Webpack 丰富。
配置不如 Webpack 灵活： Rollup 的配置项不如 Webpack 灵活，有些高级功能可能难以实现。

总结

今天我们聊了 Rollup, Code Splitting, Dynamic Imports。

Rollup 是一个 “小而美” 的打包工具，专注于 JavaScript Library 的打包。 Code Splitting 是一种把大的 bundle 拆分成多个小的 chunks 的技术，可以有效地减少首次加载时间，提高缓存利用率。 Dynamic Imports 是 ES Modules 的一个特性，允许你异步地加载模块。

Rollup + Code Splitting + Dynamic Imports 是一个强大的组合，可以用来优化你的前端项目。

希望大家听完之后，能对前端工程化有更深入的了解，并在实际项目中应用这些技术。

今天的讲座就到这里，谢谢大家！

有问题可以随时提问，或者在评论区留言。咱们下期再见！

发表回复 取消回复

发表回复取消回复