这是我参与「第五届青训营 」笔记创作活动的第14天
1.为什么需要构建工具
-
定位:新一-代前端构建工具
-
两大组成部分:
1.No-bundle开发服务，源文件无需打包 2.生产环境基于Rollup的Bundler
核心特征 1.高性能，dev启动速度和热更新速度非常快! 2.简单易用，开发者体验好
浏览器原生ESM支持
两大要素：1.script标签增加type=‘module‘属性2.使用ESM模块到处语法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>test esm</title>
</head>
<body>
<script type= ”module">
import { foo } from ' ./foo. js'
console.log(foo)
</script>
</body>
</html>
export const foo='foo'
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild-基于Golang开发的前端工具，具备如下能力:
1.打包器Bundler
2.编译器Transformer
性能极高，在Vite中被深度使用
3.压缩器Minifier
内置的Web构建能力
Vite开箱即用的功能等价于webpack、webpack-dev- server、css-loader、style-loader、less-loader、sass- loader、postcss - loader、file-loader、MiniCssExtractPlugin、HTMLWebpackPlugin……
2.我们如何使用Vite呢？
Vite项目初始化
#提前安装pnpm
npm i -g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
npm run dev
输入初始化参数
启动后截图
使用静态资源
目录结构
以SVG图片为例
生产环境 Tree Shaking
优化原理:
1.基于ESM的import/export语句依赖关系，与运行时状态无关
2.在构建阶段将未使用到的代码进行删除
Tree Shaking在Vite中无需配置,默认开启!
3.Vite 进阶路线
为什么需要插件机制?
抽离核心逻辑，易于拓展
语法安全降级
如何在构建产物中避免这类问题？
1.上层解决方案: @vitejs/plugin-legacy
2.底层原理
借助Babel进行语法自动降级
提前注入Polyill实现，如core js、regenerator - runtime
服务端渲染（SSR）
一种常见的渲染模式，用于提升首屏性能和SEO优化。
深入了解底层标准
重点特性：CJS规范、ESM规范、HTTP 2.0特性
