这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天。
构建工具
原因
随着前端发展，涉及到的资源是越来越多，如何高效快速的进行资源管理问题避无可避，正是由于传统的资源管理方式所带来的一系列弊端，推荐了构建工具的诞生。
痛点
前端工程的核心要素：资源
-
模块化
- 在JS中，没有统一的模块化规范，但有ESM、CommonJS、UMD等模块化规范。
-
资源编译
- 对高级语法的编译
-
产物质量
- 对代码体积、代码性能、兼容性相关的要求
-
开发效率
- 热更新
意义
-
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
-
语法转译
- 高级语法转译
- 资源加载
-
产物质量
- 产物压缩
- 无用代码删除
- 语法降级
-
开发效率
- 热更新
Vite介绍
-
定位： 新一代前端构架工具
-
两大组成部分：
- No-bundle开发服务
- 源文件无需打包
- 生产环境基于Rollup的Bundler
-
核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单医易用,开发者体验好
- 传统构架工具遇到的问题
- 缓慢的启动=>项目编译等待成本告
- 缓慢的热更新=>修改代码后不能实时更新
-
存在的问题
- 缓慢的启动导致项目编译等待成本高
- 缓慢的热更新导致修改代码后不能实时更新
-
瓶颈
- bundle带来的性能开销
- JS语言的性能瓶颈
-
浏览器原生ESM 支持
- script标签添加
type="module"属性 - 使用ESM模块导入导出语法
- 基于Esbuild的编译性能优化
- 内置的web构建能力
Vite具有强大的开箱即用功能，等价于：
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HHTMLWebpackPlugin
Vite实战
1.初始化
npm i -g pnpm
pnpm create vite
pnpm install
npm run dev
复制代码
复制代码
2.引入资源 3.使用HMR：无需额外配置，自动开启 4.生产环境Tree Shaking
整体架构
- 关键技术：依赖预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
- 实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
- 关键技术：单文件编译
- 用Esbuild编译的优势：编译速度提升极快 局限性：不支持类型检查，不支持语法降级到ES5
- 关键技术：代码压缩
- Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具。
- 关键技术：插件机制
- 开发阶段：模拟Rollup插件机制
- 生产环境：直接使用Rollup
