目录
1、浅谈构建构建工具
1.1、前端为何要使用构建工具?
前端通点:资源
随着前端发展,涉及到的资源是越来越多,如何搞笑快速的进行资源管理问题避无可避,正是由于传统的资源管理方式所带来的一系列弊端,推荐了构建工具的诞生。
构建工具这里从四个方面进行描述:
-
模块化:
ESM、CommonJs、UMD
模块化方案
-
提供模块加载方案
-
兼容不同模块规范
-
-
资源编译: 高级语法的编译
语法转译
-
高级语法转译:如
Sass、TypeScript
-
资源加载:如图片、字体、worker
-
-
产物质量: 代码体积、代码性能
方案
-
产物压缩、无用代码删除、语法降级
-
-
开发效率: 热更新
2、Vite概要介绍
2.1、Vite是什么?Why Vite?
定位: 新一代前端构架工具
两大组成部分:
-
No-bundle开发服务,源文件无需打包
-
生产环境基于Rollup的Bundler
核心特征:
-
高性能,dev启动速度和热更新速度非常快
-
简单医易用,开发者体验好
传统构架工具遇到的问题
-
缓慢的启动=>项目编译等待成本告
-
缓慢的热更新=>修改代码后不能实时更新
瓶颈
-
bundle带来的性能开销
-
JS语言的性能瓶颈
3、Vite上手实战
3.1、Vite项目初始化
-
提前安装
pnpm
(需管理员权限)npm i -g pnpm
-
初始化命令
pnpm create vite
-
安装依赖
pnpm install
-
项目启动
npm run dev
3.2、使用Sass/Scss & Css Modules
-
安装Sass
pnpm i sass -D
-
目录结构
-
index.module.scss
.header { color: red; }
-
index.tsx
import React from 'react'; import styles from './index.module.scss'; export function Header(){ return <div className={styles.header}>Header</div> }
-
效果:页面Header文字表现为红色
3.3、使用静态资源
-
用法:比如图片直接引入在需要的地方加上就即可
3.4、使用HMR
无需额外配置自动开启
3.5、生产环境 Tree Shaking
Tree Shaking 在Vite中 无需配置,自动开启
优化原理
-
基于
ESN
的import/export 语句依赖关系,与运行时状态无关 -
在构架阶段将为使用道德代码进行删除
理解:在打包时项目中引用单位使用的部分不会进行打包处理
-
打包
pnpm run build
4、Vite整体架构
关键技术:依赖预打包
为什们要进行预打包?
-
避免node_moudles过多的文件请求
-
将COmmonJs格式转换为ESM格式
实现原理:
-
服务器启动前扫描代码中用到的依赖
-
用Esbuild对依赖代码进行滚预打包
-
改写import语句,指定依赖为预构建产物路径
//改写前 import React from "react"; //改写后 import React from '/node_nodules/.vite/react.js'
关键技术:单文件编译
用Esbuild
编译TS/JSX
优势: 编译速度提升10-100x
局限性
-
不支持类型检查
-
不支持语法降级为
ES5
关键技术:代码压缩
**Esbuild
作为默认压缩工具,替换传统的Terser、Uglify.js
等压缩工具**
关键技术:插件机制
开发阶段:使用Rollup
插件机制
生产环境: 直接使用Rollup
5、Vite进阶路线
深入双引擎
学习顺序
-
先了解基本使用,动手尝试各项常用配置
-
然后学习其插件开发
为什么需要插件机制?
-
抽离核心逻辑
-
易于拓展
Vite插件开发
-
服务启动阶段
-
config
-
configResolved
-
options
-
configureServer
-
buildStart
-
-
请求相应阶段
-
transformIndexHtml
-
resolveId => load => transform
-
-
热更新阶段:
handleHotUpdate
-
服务关闭阶段
-
buildEnd
-
closeBundle
-
参考资料
-
复杂度较低的插件:json加载插件
-
复杂度中等的插件:Esbuild接入插件
-
复杂度较高的插件:官方React插件
代码分割(拆包)
参考资料
JS
编译工具(Bable
)
出现原因:
-
JS
语法标繁多,浏览器支持程度不一 -
开发者需要用到高级语法
参考资料:
语法安全降级
如何避免
-
上层解决方案:
@vite.js/plugin-legacy
-
底层解决
-
借助Bable进行语法自动降级
-
提前注入Polyfill实现,如core-js,regenerator-runtime
-
参考资料
服务器渲染
一种常见的渲染模式,用于提升首屏性能和SEO
优化
参考资料
深入了解底层标准
-
CJS规范
-
ESM规范
-
HTTP2.0特性
参考资料