Vite学习 | 青训营笔记

Zhou某人
116 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

前端项目由一系列的资源组成，经过迭代后工程化问题越来越严重，如：模块化、资源编译、产物的质量、开发的效率。

1、前端构建工具的意义？

前端构建工具可以让我们在开发时便于管理自己的文件，形成规范。

痛点 image.png

意义

  • 模块化
  1. 提供模块加载方案
  2. 兼容不同模块规范
  • 语法转译
  1. 高级语法转译
  2. 资源加载
  • 产物质量
  1. 产物压缩、无用代码删除、语法降级
  • 开发效率
  1. 热更新

2、Why Vite?

Vite概览

vite是新一代的前端构建工具，No-bundle开发服务，源文件无需打包，生产环境基于Pollup的Bundler。带来了更好的开发体验。

核心特征：①高性能，dev启动速度和热更新速度非常快。②简单易用，开发者体验好

3、Vite使用

项目初始化

  1. 安装pnpm npm i -g pnpm

  2. 初始化命令 pnpm create vite

  3. 安装依赖 pnpm install

  4. 启动项目 npm run dev

image.png

image.png

使用Sass/Scss&CSS Moudules

目录结构

image.png

安装Sass——pnpm i sass -D

//index.tsx
import styles from '.index.moudle.sass';
export function Header(){
    return <p className={style.header}>Begin</p>
}

//index.module.scss
.header{
    color:red;
}

引用组件

import {Header} from './components/Header'
export default function APP(){
    return (
        <div>
            <Header />
        </div>
    );
}

使用静态资源

import logUrl from './logo.svg'
//return 内
<img src={logUrl} alt=''/>

4、vite整体架构

整体架构有开发环境和生产环境两种模式

image.png

关键技术

  • 依赖预打包——避免node_modules过多的文件请求、将CommonJs格式转换为ESM格式

  • 单文件编译——用Esbuild编译TS/JSX（不支持类型检查、不支持语法降级到ES5）

  • 代码压缩

  • 插件机制——开发阶段（模拟Pollup插件机制）、生产环境（直接使用Poullup）

总结

随着人们需求的增加，前端开发越来越注重“规范化”，一个稍大点的项目就需要 有一个标准化的管理以及各类资源的规范和编译效率。Vite构建工具让我们有另一个比较好的模块化管理、资源编译、产物质量和良好的开发体验。

avatar
文章
阅读
粉丝