这是我参与「第五届青训营 」笔记创作活动的第10天
前端模块化工具的意义
- 模块化方案
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
- 产物质量
- 产物压缩、无用代码删除、语法降级
- 开发效率
- 热更新
Vite是什么？
定位:新一代前端构建工具
两大组成部分:
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup 的Bundler
核心特征
- 高性能, dev启动速度和热更新速度非常快!
- 简单易用，开发者体验好
Vite优势
基于原生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
项目初始化
- 初始化命令：
pnpm create vite - 安装依赖：
pnpm install - 启动项目：
npm run dev
输入初始化参数
启动后
启动后ctrl + 鼠标左键单击路径地址打开即可
生产环境 Tree Shaking
优化原理:
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking在Vite中无需配置，默认开启!
