这是我参与「第五届青训营 」笔记创作活动的第14天
01.为什么需要构建工具?
vite它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源
前端工程的痛点
核心要素--资源
- JS
- TS
- JSX
- CSS
- SCSS
- LESS
- PNG
- JPEG
- WEBP
模块化: ESM、CommonJs、UMD
资源编译: 高级语法的编译
产物质量: 代码体积、代码性能
开发效率: 热更新
前端构建工具的意义
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译，如 Sass、TypeScript
- 资源加载，如图片、字体、worker
产物质量
产物压缩、无用代码删除语法降级
开发效率
热更新
Vite 是什么?
定位:新一代前端构建工具
两大组成部分
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
核心特征
- 高性能，dev 启动速度和热更新速度非常快!
- 简单易用，开发者体验好
两大行业趋势
- 全球浏览器对原生ESM的普遍支持(目前占比92%以上)
- 基于原生语言(Go、Rust)编写前端编译工具链
- 如 Go 语言编写的Esbuild、 Rust 编写的 SWC
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild 的编译性能优化
Esbuild-基于 Golang 开发的前端工具，具备如下能力:
- 打包器 Bundler
- 编译器Transformer
- 压缩器 Minifier
性能极高，在 Vite 中被深度使用
内置的Web构建能力
Vite 开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
Vite 上手实战
- 提前安装 pnpmnpm i -g pnpm
- 初始化命令 pnpm create vite
- 安装依赖 pnpm install
- 启动项目 npm run dev
