Vite 打包原理

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

Vite 是一个现代化的前端构建工具，它提供了快速的开发服务器和高效的打包功能。Vite 的打包功能基于 Rollup，一个强大的 JavaScript 模块打包器。本文将深入探讨 Vite 的打包原理，帮助开发者更好地理解和使用这一工具。

1. Vite 的基本使用

首先，确保你已经安装了 Vite。如果还没有安装，可以通过 npm 或 yarn 进行安装：

npm init vite@latest
# 或者
yarn create vite

创建一个新项目后，你可以通过以下命令启动开发服务器：

npm run dev
# 或者
yarn dev

2. Vite 的打包流程

Vite 的打包流程主要包括以下几个步骤：

2.1 依赖预构建

Vite 使用 esbuild 进行依赖预构建。esbuild 是一个极快的 JavaScript 打包器，它可以将 CommonJS 模块转换为 ES 模块，并缓存构建结果以提高性能。

2.2 代码转换

Vite 使用 Rollup 进行代码转换。Rollup 是一个 JavaScript 模块打包器，它可以将多个模块打包成一个文件。Vite 使用 Rollup 的插件系统来处理各种文件类型，如 JavaScript、CSS、图片等。

2.3 代码优化

Vite 使用 Rollup 的插件系统进行代码优化。例如，可以使用 @rollup/plugin-terser 插件进行代码压缩。

2.4 生成打包结果

最后，Vite 将打包结果输出到指定的目录。默认情况下，打包结果输出到 dist 目录。

3. Vite 的打包配置

Vite 的打包配置基于 Rollup 的配置。你可以在 vite.config.js 文件中配置打包选项。以下是一些常用的配置选项：

3.1 入口和出口

你可以通过 build.rollupOptions.input 和 build.rollupOptions.output 配置入口和出口。

// vite.config.js
export default {build: {rollupOptions: {input: 'src/main.js',output: {dir: 'dist',format: 'es'}}}
}

3.2 插件

你可以通过 plugins 选项配置 Rollup 插件。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()]
});

3.3 代码分割

你可以通过 build.rollupOptions.output.manualChunks 配置代码分割。

// vite.config.js
export default {build: {rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}}}}}
}

4. 总结

Vite 的打包功能基于 Rollup，一个强大的 JavaScript 模块打包器。通过深入理解 Vite 的打包原理，开发者可以更好地利用这一工具，满足复杂的业务需求。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论。