Vite知识体系|青训营笔记

用户3911297210902
99 阅读2分钟

Vite知识体系|青训营笔记

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

Vite基础理解

Vite是什么

  • Vite名字来源于法语, 意思为rapid，quickly。正好反映了其核心卖点——  "快速"  。在整体功能上实现了类似于预配置的webpack加dev server的功能， 用于提高前端项目的整体构建速度。根据测试，服务器启动速度和HMR基本上都可以达到毫秒级别。
  • 定义：新一代前端构建工具
  • 两大组成部分
    • No-bundle开发服务，源文件无需打包
    • 生产环境基于Rollup的Bundle
  • 核心特征
    • 高性能：Dev启动速度和热更新速度非常快
    • 简单易用，开发者体验好

ESM介绍及应用

  • ESM

    • ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。

    • 在很多现代浏览器中可以使用

    • 它兼具两方面的优点：具有 CJS 的简单语法和 AMD 的异步

    • 得益于 ES6 的静态模块结构，可以进行Tree shaking.

    • ESM 允许像 Rollup 这样的打包器，删除不必要的代码，减少代码包可以获得更快的加载

    • 可以在 HTML 中调用，只要如下（参考文章# 【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么？）

  • 浏览器原生ESM支持
  • 两大要素
    • script标签中添加type = “module”属性
    • 使用ESM模块导入导出语法
  • 基于原生ESM的开发服务优势
    • 无需打包项目源代码
    • 天然的按需加载
    • 可以利用文件级的浏览器缓存

前端构建工具的意义

  • 模块化方案
    • 提供模块加载方案
    • 兼容不同模块规范
  • 语法转译
    • 高级语法转译，如Sass,typescript
    • 资源加载，如图片，字体，worker
  • 产物质量
    • 产物压缩，无用代码删除，语法降级
  • 开发效率
    • 热更新

Vite使用

项目初始化

  • 第一步 创建命令 npm init vite-app (project 项目名)

  • 第二步 切换到目录 cd project

  • 第三步 安装依赖包 npm install

  • 第四步 启动项目 npm run dev

使用CSS modules

WIGZQ6%B$XM~}4J}2}DF9HI.png

  • 使用静态资源
  • 使用HMR
  • 生产环境Tree Shaking

Vite整体架构

关键技术-依赖预打包

  • 为什么要进行预打包
    • 避免node_modules过多的文件请求
    • 将CommonJS格式转换为ESM格式
  • 实现原理
    • 服务启动前扫描代码中用到的依赖
    • 用Esbuild对依赖代码进行预打包
    • 改写import语句，指定依赖为预购建产物路径

关键技术：单文本编译

  • 用Esbuild编译JS/JSX
  • 优势：编译速度提升
  • 局限性：
    • 不支持类型降级
    • 不支持语法降级到ES5

关键技术：插件机制

avatar
文章
阅读
粉丝