这是我参与「第四届青训营」笔记创作活动的第9天

Vite

01.为什么需要构建工具

前端构建工具的意义

模块化方案：

提供模块加载方案
兼容不同模块规范

语法转移：

高级语法转译，如Sass，TypeScript
资源加载，如图片，字体，worker

产物质量：产物压缩，无用代码删除，语法降级

开发效率：热更新

02.Vite是什么？

定位：新一代前端构建工具。

两大组成部分：

No-bundle 开发服务，源文件无需打包。
生产环境基于Rollup的Bundler。

核心特征：

高性能，dev启动速度和热更新速度非常快！
简单易用，开发者体验好。

Vite的优势

1.基于ESM的开发服务优势：

无需打包项目源代码
天然的按需加载
可以利用文件级的浏览器缓存

2.基于Esbuild的编译性能优化

3.内置的Web构建功能，开箱即用：

Vite上手使用

项目初始化

1.创建模板+选择模板(这里我们选择vue)

npm init vite@latest

支持的模板： 2.进入该文件夹

cd vite-project

3.安装依赖

npm install

4.运行项目

npm run dev

使用项目

1.components文件下创建Header文件

<template>
  <div>
      <p>我是头部</p>
      <p @click="num++">点击我测试{{num}}</p>
   </div>
</template>

<script>
export default {
  name:'Header',
  data(){
    return{
        num:0
    }
  }
}
</script>

然后引用它并使用它

import Header from './components/Header.vue';

<Header />

2.使用less

Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

npm install -D less

如果是用的是单文件组件，可以通过 <style lang="less">（或其他预处理器）自动开启。

<style lang="less">
   .header{
    color:red;
    div{
      color: red;
      background: rebeccapurple;
    }
  }
</style>

效果：

Vite 整体建构

图解：

1.关键技术：依赖预打包

为什么要预打包：

避免 node_modules过多的文件请求
将CommonJS格式转换为ESM格式

实现原理：

服务器启动前扫码代码中使用的依赖
用Esbuild对依赖代码进行预打包
改写import语句，指定依赖为预构建产物路径

2.单文件编译

用Esbuild编译 TS/JSX

优势：编译速度提升 10-100x

局限性：

不支持语法检查
不支持语法降级到ES5

3.代码压缩

Esbuild作为默认压缩工具，替代传统的Terser，Uglify.js等压缩工具

4.插件技术

开发阶段 -> 模拟Rollup插件机制生成环境 -> 直接使用 Rollup

深入双引擎

esbuild && rollup.js

推荐学习顺序：先了解基本使用，动手尝试各项常用配置；然后学习其插件开发

插件机制

它的一些生命周期钩子插件开发：可以去查看Vite的插件开发文档

Vite 知识体系 | 青训营笔记