打包工具-Vite | 青训营

睡得好没烦恼
89 阅读7分钟

看完青训营 vite 相关的课程，梳理一下 vite 相关的内容。

为什么需要构建工具

当涉及前端开发时，构建工具的存在是为了解决一系列痛点和挑战。首先我们来了解一下前端工程所面临的问题：

  1. 模块化管理：随着项目规模的增加，前端代码通常需要划分为多个模块，并且这些模块之间存在依赖关系。但是在原生的 JavaScript 中，并没有内置模块化的支持，这导致了命名冲突、全局污染等问题。
  2. 资源编译和优化：前端开发涉及到多种类型的资源，如 JavaScript、TypeScript、CSS、SCSS、Less、图片等。然而，这些资源在开发阶段需要进行编译、转换、优化等处理，以实现最佳性能和用户体验。
  3. 产物质量管理：在项目开发过程中，我们希望始终保持代码的高质量，包括格式化、代码检查、单元测试、性能测试等方面。但是手动执行这些任务会非常繁琐，容易被忽视，并且对于团队合作来说，统一的代码质量标准非常重要。
  4. 开发效率：在前端开发中，我们希望能够快速构建和调试项目，实时预览变更，并且能够高效地进行代码重用和模块复用。这样可以大大提高开发效率，节省开发时间。

综上所述，前端构建工具的存在是为了解决上述痛点和挑战。构建工具可以提供以下好处：

  • 模块化管理：构建工具可以通过打包和依赖管理来帮助我们解决模块化管理的问题，例如使用 CommonJS、AMD、ES Modules 等模块化规范。

  • 资源编译和优化：构建工具可以自动处理资源文件的编译、转换和优化，例如压缩 JavaScript、CSS、图片等，将它们转换为适合生产环境的格式，从而提高网页加载速度和性能。

  • 产物质量管理：构建工具可以集成代码格式化、代码检查、单元测试等工具和任务，帮助我们保持代码的高质量，并在开发过程中即时发现和修复问题。

  • 开发效率：构建工具可以提供开发服务器、热模块替换（HMR）等功能，实现快速构建、实时预览和自动刷新，以及自动化任务，如自动编译、自动刷新等，从而提高开发效率。

    image.png

通过使用构建工具，我们可以优化前端开发流程，简化工作流程，并提高团队的协作性和代码质量，同时减少开发时间和成本。

什么是Vite？

Vite是一种下一代前端构建工具，由两个主要组件组成：无捆绑开发服务器和基于Rollup的生产打包工具。

Vite的核心特点

  1. 高性能：Vite的开发服务器和热更新速度非常快，启动项目的响应时间极短。

  2. 简单易用：Vite提供了出色的开发体验，它具有简单、直观的配置和开发流程，无需繁琐的设置即可快速上手。

Vite的优势

基于原生ESM的开发服务

Vite无需打包项目源代码，实现了按需加载，同时借助文件级别的浏览器缓存来提升加载速度和性能。

image.png

基于Esbuild的编译性能优化

Vite采用Esbuild作为编译工具，具备出色的性能表现。Esbuild是一款基于Golang开发的前端工具，以其卓越的打包、编译和压缩能力而著称。由下图也可以看出Esbuild的性能是极高的！

image.png

内置的Web构建能力

Vite内置了许多功能，例如webpack、webpack-dev-server、css-loader、style-loader、less-loader、sass-loader、postcss-loader、file-loader、MiniCssExtractPlugin和HTMLWebpackPlugin等，可以满足各种构建需求。

image.png

通过以上特性和优势，Vite成为了一个强大而灵活的工具。

使用Vite

  1. 项目初始化：使用PNPM进行初始化，并安装项目依赖。
//提前安装pnpm 
npm i -g pnpm 
//初始化命令 
pnpm create vite 
//安装依赖 
pnmp install 
//启动项目
npm run dev
  1. 使用Sass/Scss和CSS Modules：通过安装相关依赖，在代码中引入并使用Sass/Scss以及CSS Modules技术。
  • 首先，确保你已经安装了 Sass 及其相关依赖，你可以使用以下命令进行安装：
pnpm i sass -D
  • 然后在你的代码中引入并使用 Sass/Scss 和 CSS Modules。假设你有一个名为 module.scss 的样式文件，其中定义了一个名为 header 的样式类：
/* module.scss */
.header {
    color: red;
}
  • 接下来，在你的组件文件中，使用 CSS Modules 来导入样式并进行模块化处理。例如，在 Header.tsx 文件中：
import styles from './module.scss';

export function Header() {
    return <p className={styles.header}>This is Header</p>;
}
  • 最后，在主文件中引入 Header 组件并渲染到页面上。例如，在主文件 App.tsx 中：
import { Header } from "./components/Header";

function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

export default App;

通过以上步骤，你便可以在 Vite 项目中成功使用 Sass/Scss 和 CSS Modules 技术，实现样式的模块化和封装。

  1. 处理静态资源：通过Vite可以处理各种常见的静态资源，如图片、JSON、Web Worker和WASM等。

  • 处理图片：

    在你的代码中使用图片的时候，可以像使用普通的模块一样导入图片资源。例如，假设有一个名为 logo.png 的图像文件，你可以像这样导入并在代码中使用它：

    import logo from './assets/logo.png';

function App() {
  return <img src={logo} alt="Logo" />;
}

  • 处理 JSON 文件：

    Vite 也可以处理 JSON 文件，通过导入 JSON 文件并在代码中使用它。例如，假设有一个名为 data.json 的 JSON 文件，你可以像这样导入数据和使用它：

    import data from './assets/data.json';
console.log(data);

  • 处理Web Worker：

    使用 Vite，你可以轻松地处理和使用 Web Worker。首先，创建一个 JavaScript 文件来定义你的 Web Worker 脚本，例如 worker.js：

    // worker.js
self.addEventListener('message', (event) => {
  // 处理消息的逻辑
  // ...
});

    然后，在你的主 JavaScript 文件中，你可以像这样导入并创建 Web Worker：

    import Worker from './worker.js';

const worker = new Worker();

// 向 Web Worker 发送消息
worker.postMessage('Hello!');

// 接收来自 Web Worker 的消息
worker.addEventListener('message', (event) => {
  console.log(event.data);
});

  • 处理 WASM 文件：

    如果你需要使用 WebAssembly (WASM) 文件，Vite 也可以进行处理。你可以像导入普通模块一样导入 WASM 文件，并在你的代码中使用它。例如，假设有一个名为 lib.wasm 的 WASM 文件，你可以像这样导入和使用它：

    import { add } from './assets/lib.wasm';
console.log(add(2, 3)); // 调用 WASM 函数

  1. 使用HMR（热模块替换）：Vite支持热模块替换功能，无需额外配置即可实现代码的实时更新和调试。

  2. 生产环境Tree Shaking：Vite在生产环境中自动开启Tree Shaking，可以消除未使用的代码，减小构建产物的体积。

    不过要注意的是：

    image.png

Vite的架构具有的一些关键技术

  1. 依赖预打包：Vite通过预打包项目的依赖，避免了大量的文件请求和将CommonJS格式转换为ESM格式的开销。

  2. 单文件编译：Vite使用Esbuild对TS/JSX代码进行高效编译，提升了编译速度，但不支持类型检查。

  3. 代码压缩：Vite使用Esbuild作为默认的代码压缩工具，取代了传统的Terser和Uglify.js，提供了更快速的压缩性能。

  4. 插件机制：Vite提供了插件机制，开发者可以通过编写插件来扩展Vite的功能和能力。

随着Vite的不断发展和社区支持，它已经成为了一个极为活跃和受欢迎的前端构建工具。无论是单独使用Vite，还是与其他框架（如Vue、React）配合使用，都能带来更高效、更快速的开发体验。

希望本文对Vite有一个初步的了解，如有错，还请指正！

avatar
文章
阅读
粉丝