JavaScript内核与高级编程之：`Vite`的`Rollup`打包：其打包策略与`code splitting`。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们聊聊Vite的Rollup打包，特别是它那让人又爱又恨的代码分割（code splitting）。放心，咱们不搞那些虚头巴脑的概念，直接上干货，保证你听完能把Vite玩得溜溜的。

开场白：Vite与Rollup，一对好基友

Vite，这名字听起来就很快，确实它也很快。但你有没有想过，它为什么这么快？很大一部分功劳要归功于它背后的Rollup。Vite在开发阶段用的是原生ESM，也就是浏览器原生支持的模块化，速度飞起。但是到了生产环境，为了兼容性、性能优化等等，还得靠打包器来“收拾”一下。Vite选择了Rollup，一个以ESM为基础的打包器，它们俩配合起来，简直就是珠联璧合。

第一幕：Rollup打包策略：一锅乱炖变有序

Rollup的作用，简单来说，就是把你的代码，包括各种模块、依赖，打包成一个或多个可以部署到生产环境的文件。它的打包策略可以概括为：

入口点（Entry Point）分析： Rollup首先会找到你的入口文件，比如main.js或者index.ts。这个入口文件就像一棵树的根，Rollup会从这里开始，顺着import语句，一层层地往下“爬”，找出所有依赖的模块。
依赖图构建： Rollup会根据import语句，构建出一个依赖关系图。这个图描述了你的代码中各个模块之间的依赖关系。这个图非常重要，它是Rollup进行后续优化的基础。
Tree Shaking： Rollup最厉害的招数之一就是Tree Shaking，也就是“摇树”。它会分析你的代码，找出那些没有被使用的代码（Dead Code），然后把它们从最终的打包文件中移除。这个过程就像摇一棵树，把那些枯枝败叶摇掉，只留下健康的枝干。
代码转换（Transform）： Rollup可以通过插件机制，对代码进行各种转换。比如，把ES6+的代码转换成ES5，加上polyfill，或者压缩代码等等。
代码生成（Output）： 最后，Rollup会根据配置，把处理后的代码生成一个或多个打包文件。这些文件就可以直接部署到生产环境了。

第二幕：Code Splitting：化整为零的艺术

Code Splitting，中文翻译为“代码分割”，是提高Web应用性能的关键技术之一。它的核心思想是：把你的代码分成多个小的chunk，然后按需加载。

为什么要Code Splitting？

想象一下，如果你的应用非常庞大，所有的代码都打包成一个文件，那么用户第一次访问你的网站时，需要下载整个文件才能看到任何内容。这不仅会浪费用户的流量，还会让用户等待很长时间，严重影响用户体验。

Code Splitting可以解决这个问题。它可以把你的代码分成多个小的chunk，比如：

入口chunk： 包含应用的主要代码，比如UI框架、核心逻辑等等。
路由chunk： 包含不同路由的代码，只有当用户访问某个路由时，才会加载对应的chunk。
第三方库chunk： 包含第三方库的代码，比如lodash、moment等等。
公共chunk： 包含多个chunk共享的代码，可以避免重复加载。

这样，用户第一次访问你的网站时，只需要下载入口chunk，就可以看到核心内容。当用户访问其他路由时，才会按需加载对应的路由chunk。这大大减少了首次加载的时间，提高了用户体验。

Code Splitting的实现方式

在Vite中，Code Splitting是由Rollup自动处理的。你不需要手动配置什么，只需要按照一定的规范编写代码，Rollup就会自动帮你进行代码分割。

1. 动态导入（Dynamic Import）：

这是最常用的Code Splitting方式。你可以使用import()函数来动态加载模块。例如：

async function loadComponent() {
  const { default: MyComponent } = await import('./MyComponent.vue');
  return MyComponent;
}

loadComponent().then(component => {
  // 使用MyComponent
});

在这个例子中，MyComponent.vue会被打包成一个单独的chunk，只有当loadComponent()函数被调用时，才会加载这个chunk。

2. 路由懒加载（Lazy Loading）：

对于单页面应用（SPA），路由懒加载是一种非常有效的Code Splitting方式。你可以使用Vue Router或者React Router等路由库，来实现路由的懒加载。例如：

// Vue Router
const routes = [
  {
    path: '/about',
    component: () => import('./components/About.vue') // 懒加载
  }
];

在这个例子中，About.vue会被打包成一个单独的chunk，只有当用户访问/about路由时，才会加载这个chunk。

3. 手动配置Rollup：

虽然Vite已经默认配置好了Code Splitting，但是你也可以手动配置Rollup，来更精细地控制代码分割。你可以在vite.config.js文件中，配置build.rollupOptions选项。例如：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'; // 将所有node_modules中的模块打包成vendor.js
          }
        }
      }
    }
  }
});

在这个例子中，我们使用manualChunks选项，把所有node_modules中的模块打包成一个单独的vendor.js文件。这可以利用浏览器的缓存机制，提高加载速度。

第三幕：Rollup配置详解：打造你的专属打包方案

Vite对Rollup进行了封装，使得大部分情况下你不需要直接操作Rollup的配置。但是，如果你想进行更高级的定制，就需要了解Rollup的配置选项。

在vite.config.js文件中，你可以通过build.rollupOptions选项来配置Rollup。这个选项是一个对象，包含以下常用的属性：

input： 指定入口文件。如果不指定，Rollup会默认使用index.html作为入口文件。
output： 指定输出文件的配置。这是一个对象，包含以下属性：
- dir： 指定输出目录。默认为dist。
- format： 指定输出文件的格式。常用的格式有：
  - es： ES模块格式。这是最常用的格式，适合现代浏览器。
  - cjs： CommonJS格式。适合Node.js环境。
  - umd： UMD格式。兼容多种环境。
  - iife： 立即执行函数表达式格式。适合在浏览器中直接运行。
- entryFileNames： 指定入口文件的文件名。
- chunkFileNames： 指定chunk文件的文件名。
- assetFileNames： 指定静态资源文件的文件名。
- manualChunks： 手动配置代码分割。
plugins： 指定Rollup插件。Rollup的插件机制非常强大，可以让你对代码进行各种转换和优化。

Rollup常用插件

插件名称	功能
`@rollup/plugin-node-resolve`	允许 Rollup 找到 Node.js 模块并将其包含在你的 bundle 中。这对于使用 npm 安装的第三方库非常有用。
`@rollup/plugin-commonjs`	将 CommonJS 模块转换为 ES 模块，以便 Rollup 可以处理它们。许多旧的 Node.js 模块使用 CommonJS 格式。
`@rollup/plugin-babel`	使用 Babel 转换你的 JavaScript 代码。这允许你使用最新的 JavaScript 语法，并将其转换为旧版本的 JavaScript，以便在旧浏览器中运行。
`rollup-plugin-terser`	压缩你的 JavaScript 代码，使其更小，加载更快。
`rollup-plugin-vue`	如果你使用 Vue.js，这个插件允许你将 Vue 组件包含在你的 bundle 中。
`rollup-plugin-postcss`	允许你使用 PostCSS 处理你的 CSS 代码。PostCSS 是一个强大的 CSS 转换工具，可以让你使用各种插件来优化你的 CSS 代码。
`rollup-plugin-image`	允许你导入图像文件，并将其包含在你的 bundle 中。
`@rollup/plugin-json`	允许你导入 JSON 文件，并将其包含在你的 bundle 中。

一个完整的vite.config.js示例

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { terser } from 'rollup-plugin-terser';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html') //多页面应用配置
      },
      output: {
        entryFileNames: `[name].[hash].js`,
        chunkFileNames: `chunks/[name].[hash].js`,
        assetFileNames: `assets/[name].[hash].[ext]`,
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      },
      plugins: [
        terser() // 压缩代码
      ]
    }
  }
});

在这个例子中，我们配置了以下内容：

使用@vitejs/plugin-vue插件，来支持Vue组件。
使用resolve.alias选项，来配置别名，方便在代码中引用模块。
使用build.rollupOptions.input选项，配置多页面应用入口。
使用build.rollupOptions.output选项，配置输出文件的文件名和目录。
使用build.rollupOptions.output.manualChunks选项，手动配置代码分割。
使用build.rollupOptions.plugins选项，添加rollup-plugin-terser插件，来压缩代码。

第四幕：性能优化：让你的网站飞起来

Code Splitting只是性能优化的一部分。还有很多其他的技巧可以用来提高Web应用的性能，比如：

Gzip压缩： 启用Gzip压缩，可以减少服务器传输的文件大小。
CDN加速： 使用CDN（内容分发网络），可以把你的静态资源分发到全球各地的服务器上，让用户从离他们最近的服务器上下载资源，提高加载速度。
浏览器缓存： 合理配置浏览器缓存，可以减少重复下载的次数。
图片优化： 压缩图片，使用合适的图片格式，可以减少图片的大小。
懒加载： 对图片、视频等资源进行懒加载，只有当用户滚动到可视区域时，才加载这些资源。
Preload/Prefetch： 使用<link rel="preload">和<link rel="prefetch">标签，可以提前加载重要的资源，或者预加载用户可能访问的资源。

第五幕：避坑指南：那些年我们踩过的坑

在使用Vite和Rollup进行打包时，可能会遇到一些坑。下面是一些常见的坑和解决方案：

ESM/CJS 兼容性问题： 有些第三方库可能同时提供ESM和CJS两种格式，Rollup可能会选择错误的格式。你可以使用@rollup/plugin-commonjs插件来解决这个问题。
循环依赖： 循环依赖会导致Rollup无法正确构建依赖图，导致打包失败。你需要尽量避免循环依赖，或者使用一些工具来检测和解决循环依赖。
动态导入失败： 动态导入可能会因为各种原因失败，比如网络问题、权限问题等等。你需要做好错误处理，保证应用能够正常运行。
Chunk命名冲突： 如果你手动配置了manualChunks选项，可能会导致Chunk命名冲突。你需要仔细检查你的配置，避免命名冲突。

总结：Vite + Rollup，前端开发的黄金搭档

Vite和Rollup是一对非常强大的工具，它们可以帮助你构建高性能的Web应用。掌握它们的使用方法，可以让你在前端开发的道路上越走越远。希望今天的讲座能对你有所帮助。记住，学习是一个持续的过程，多实践，多思考，才能真正掌握这些技术。

好了，今天的分享就到这里，祝大家编码愉快！下次再见！

发表回复 取消回复

发表回复取消回复