Vite知识体系 | 青训营笔记

用户2161734947844
79 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第14天

本节课的主要内容

  • 01 前端构件工具
  • 02 Vite概要介绍
  • 03 Vite上手实战
  • 04 Vite整体架构
  • 05 Vite进阶路线

前端工程的痛点

image.png

前端构建工具的意义

  • 模块化方案
    • 提供模块加载方案
    • 兼容不同模块规范
  • 语法转译
    • 高级语法转译，如Sass、TypeScript
    • 资源加载，如图片、字体、worker
  • 产物质量
    • 产物压缩、无用代码删除、语法降级
  • 开发效率
    • 热更新

什么是构建工具

  • 代码转换
    • 将TpyeScript编译成JavaScript、将SCSS编译成CSS等
  • 文件优化
    • 压缩JavaScript、CSS、HTML代码，压缩图片等
  • 代码分割
    • 提取多个页面的公共代码
  • 模块合并
    • 在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件
  • 自动刷新
    • 监听本地源代码的变化，自动重新构建，刷新浏览器
  • 代码校验
    • 在代码被提交到仓库前需要校验代码是否符合规范
  • 自动发布
    • 更新代码后，自动构建出线上发布代码并传输给发布系统

Vite是什么？Why Vite？

  • 新一代前端构建工具
  • 两大组成部分
    • 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速
    • 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源；
  • 核心特征
    • 高性能，dev启动速度和热更新速度非常快
    • 简单易用，开发者体验好

浏览器原生ESM支持

export const foo = 'foo';

<! DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="uft-8">
    <title>test esm</title>
</head>
<body>
    <script type="module">
        import { foo } from './foo.js'
        console.log(foo)
    </script>   
</body>
</html>
  • 两大要素
    • script 标签增加 type="module" 属性
    • 使用 ESM 模块导入导出语法

Vite开箱即用的功能等价于

  • webpack
  • webpack-dev-server
  • css-loader
  • style-loader
  • less-loader
  • sass-loader
  • postcss-loader
  • file-loader
  • MiniCssExtractPlugin
  • HTMLWebpackPlugin

如何使用Vite

  • 项目初始阿虎
// 提前安装 pnpm
npm i -g pnpm
// 安装依赖
pnpm install
// 启动项目
npm run dev

Vite对CSS的支持

  • 直接导入css即可
  • Vite可以直接支持css预处理器，比如less
  • 可以导入less
  • Vite直接支持postcss的转换

参考资料

hacks.mozilla.org/2018/03/es-…

中文文档

cn.vitejs.dev/guide/

avatar
文章
阅读
粉丝