Vite知识体系1 | 青训营

107 阅读1分钟

01浅谈构建工具

模块化ESM、commonjs、UMD

1.      提供模块加载方案

2.      兼容各不同模块规范

 

资源编译 高级语法的编译

1.      高级语法转译,如sass、typescript

2.      资源加载,如图片、字体、worker

 

产物质量 代码体积、代码性能

产物压缩、无用代码删除

语法降级

 

开发效率 热更新

 

02vite概要介绍

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

两大部分组成

1.      no-bundle开发服务,源文件无需打包

2.      生产环境基于rolluo的bundler

核心特征

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

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

 

当下问题

缓慢的启动——项目编译等待成本高

缓慢的热更新——修改代码后不能时时更新

瓶颈

1.      bundle带来的性能开销

2.      JavaScript语言的性能瓶颈

 

浏览器原生ESM支持

两大要素

1. Script标签增加type-moudule属性

2. 使用ESM模块导入导出语法

 

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

1.      无需打包项目源代码

2.      天然的按需加载

3.      可以利用文件及的浏览器缓存

基于Esbuild的编译性能优化

Esbuild——基于Esbuild的编译性能具有以下能力

1.      打包器bundler

2.      编译器transformer

3.      压缩器minifier

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