这是我参加【第五届青训营】笔记创作活动的第13天
前端构建化意义
模块化方案
- 1.提供模块加载方案2.兼容不同模块规范
语法转译
- 1.高级语法转译，如Sass、TypeScript2.资源加载，如图片、字体、worker 产物压缩、无用代码删除、
产物质量
- 语法降级 开发效率 热更新
Vite是什么
**新一代前端构建工具 **
**两大组成部分: **
-
1.No-bundle开发服务,源文件无需打包
-
2.生产环境基于Rollup的 Bundler
**核心特征 ** -
1.高性能,dev启动速度和热更新速度非常快!
-
2.简单易用，开发者体验好
-
Vite 关心它的发布和安装足迹； 快速安装新应用程序是一项功能。
-
Vite 打包了它的大部分依赖项，并尽可能地尝试使用现代轻量级替代方案。
继续这个持续的目标， Vite 3 的发布规模比 v2 小了 30%。
当下问题
vite开箱即用
Vite开箱即用的功能等价于
- webpack
- webpack-dev-servercss-loader
- style-loader
- less-loader
- sass-loaderpostcss-loader
- file-loader
- MiniCssExtractPluginHTMLWebpackPlugin
使用vite
生成环境tree shaking
优化原理:
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
- Tree Shaking在 Vite中无需配置，默认开启!
vite整体架构
?为什么要进行预打包?
- 避免node_modules过多的文件请求2.将CommonJS格式转换为ESM格式
实现原理:
- 服务启动前扫描代码中用到的依赖2.用Esbuild 对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术:单文件编译
- 用Esbuild 编译TS/JSX
- 优势:编译速度提升10-100
局限性:
- 不支持类型检查
- 不支持语法降级到ES5
代码压缩 插件机制
