Vite 知识体系｜ 青训营笔记

南岸o0
105 阅读2分钟

  1. 浅谈构建工具

  1. 前端工程的痛点：

  • 模块化：ESM，CommonJS,UMD
  • 资源编译：高级语法的编译
  • 产物质量：代码体积
  • 开发效率：热更新

  1. 前端构建工具的意义：

  1. Vite概要介绍（why vite?）

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

  1. 两大组成部分：

1.No-bundle开发服务，源文件无需打包

2.生产环境基于Rollup的Bundler

  1. 两大核心特征

1.高性能，dev启动速度和热更新速度非常快！

2.简单易用.开发者体验好

  1. 当前构建工具的问题

瓶颈：

bundle带来的性能开销

JavaScript语言的性能瓶颈

  1. 浏览器原生ESM支持：

  1. 基于原生ESM的开发服务Vite的优势

优势一：

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

优势二：基于Esbuild的编译性能优化

Esbuild——基于Golang开发的前端工具，具备如下能力：

  1. 打包器Bundler
  1. 编译器Transformer
  1. 压缩器Minifier

性能极高，在vite中被深度使用

优势三：开箱即用

配置文件量级比较

  1. Vite上手实战

  1. 初始化安装：

  1. 使用Sass/Scss&CSS Modules：

除了常见的图片格式，Vite也内置了对于JSON、Norker、WASM资源的加载支持

cn.vitejs.dev/guide/featu…


npm i -gpnpm
pnpm create vite
pnpm install
npm run dev

  1. 生产环境 Tree Shaking：

  1. 总结优势：

    •   开箱即用
    •   响应迅速

  1. Vite整体架构

  1. 预打包：

  1. 为什么要进行预打包？

1.避免node-modules过多的文件请求

2.将CommonJS格式转换为ESM格式

  1. 实现原理：

1.服务启动前扫描代码中用到的依赖

2.用Esbuild对依赖代鹆进行预打包

3.改写import语句，指定依赖为预构建产物路径

  1. 单文件编译：

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

局限性：

不支持类型检查

不支持语法降级到ES5

  1. 代码压缩：

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

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

  1. 插件机制：

开发阶段->模拟RoIIup插件机制

生产环境一>直接使用Rollup

  1. Vite进阶路线

代码分割：

\

avatar
文章
阅读
粉丝