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

Vite

为什么需要构建工具，前端构建工具的意义

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

组成部分

• No-Build 开发服务，源文件无需打包
• 生产环境基于Rollup 的Budler

核心特征

• 高性能，dev启动速度特别快
• 简单易用，开发者性能很好

问题

• 缓慢启动-项目编译等待成本高

• 缓慢热更新-修改代码后不能及时更新

• bundle带来性能开销

• JavaScript性能瓶颈上限

趋势

浏览器原生ESM支持

• script标签type="module"属性
• 使用ESM导出语法
• 基于原生ESM开发优势
• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级浏览器缓存

基于Esbuild的编译性能优化

• 打包器Bundler
• 编译器 Transformer
• 压缩器 Minifier

项目

集成TypeScript的支持

• "dev":"vite" 开发环境
• "build":"tsc && vite build"生产环境下构建打包
• "preview":"vite preview"产出产物的预览方式

生产环境 tree Shaking

在vite之中是不要配置，底层默认是打开的

优化原理

• 基于ESM的import/export语句依赖关系，与运行时的转台无关
• 在构建阶段未使用到的代码进行删除

整体框架

必须预编译-关键技术-依赖预打包‘

打包原因

• 避免过多node_modules过多文件请求
• 将CommonJs转换成ESM格式

实现原理

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