⚡️ Vite 2.0正式发布

阿轩的BUG
文章191
评论56
标签101
站点日志
作者总数:1位
置顶文章:0篇
标签总数:101条
文章总数:196篇
评论总数:56条
微语总数:149条
运行天数:2314天
最近更新:2024-09-30
文章标签
最新评论
Sherlock
2025-08-21
不是应该打包成apk文件吗,怎么突然就运行编译了,下一步呢
老金er
2025-05-25
人生设计非常必要,在信息化发达的今天,周围大部分人依然只能过着人生工程模式生活,长时间生活洗礼后,尽管“人生工程”已经不再适合很多人,他们也无法做出任何改变,人生设计给我们提供了新的思路,值得尝试
赏帮赚
2025-05-25
职场太多的尔虞我诈
三笑
2024-08-16
emlog6.0.1可以升级支持吗?
pony
2024-07-08
这篇文章提供了一种新的人生规划方法——"人生设计",它借鉴了产品设计的理念,鼓励人们以创造性和探索性的方式思考和规划自己的生活。以下是对这篇文章的几个评价维度: 创新性:将产品设计的理念应用于人生规划是一个新颖的视角,为人们提供了一种跳出传统生活轨迹,探索个性化生活路径的方法。 实用性:文章不仅提出了理念,还详细介绍了具体的实施步骤,包括自我评估、制定计划、原型设计和实践选择等,具有很强的操作性。 启发性:通过强调好奇心、不断尝试、重新定义问题等心态,文章鼓励人们打破常规,勇于探索未知,这对于激发个人潜能和创造力具有积极作用。 适应性:"人生设计"理念适用于不同人生阶段和不同背景的人,无论是希望从头开始的人,还是已经取得一定成就但希望探索新方向的人,都可以从中获得启发。 情感共鸣:文章对许多人对传统生活轨迹的不满和对改变的渴望进行了深刻的洞察,能够引起读者的共鸣。 可持续性:人生设计强调的是一个持续迭代和试错的过程,这与现实生活的发展规律相吻合,有助于人们在不断变化的环境中做出适应性调整。 教育意义:作为一种人生规划方法,"人生设计"可以作为教育的一部分,帮助年轻人更早地学会自我探索和规划,为未来的生活和职业发展打下基础。 局限性:尽管"人生设计"提供了一种新的思考框架,但它可能需要个人具备一定的自我认知和反思能力,对于一些缺乏自我探索经验的人来说,可能需要额外的指导和支持。 总体来说,这篇文章提供了一种有价值的人生规划方法,对于那些渴望改变、寻求个性化生活的人来说,是一种有益的参考和指导。
首页值得一看 🔍️

Vite 2.0 正式发布了

Vite(法语意思是 “快” 发音为 /vit/ 类似 veet)是一种全新的前端构建工具 你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合 但是更轻更快 Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具(如 esbuild)来提供一个快速且现代的开发体验

Vite 有多快?在 Repl.it 上从零启动一个基于 ViteReact 应用 浏览器页面加载完毕的时候 CRA(create-react-app) 甚至还没有装完依赖

如果你还没听说过 Vite 到底是什么 可以了解一下项目的设计初衷
https://cn.vitejs.dev/guide/why.html

如果你想要了解 Vite 跟其它一些类似的工具有什么区别 可以参考下方的对比:
https://cn.vitejs.dev/guide/comparisons.html

2.0 带来了什么


Vite 1.0 虽然之前进入了 RC 阶段 但在发布之前我们决定进行一次彻底的重构来解决一些设计缺陷 所以 Vite 2.0 其实是 Vite 的第一个稳定版本 2.0 带来了大量的改进:

多框架支持


Vite 一开始主要注重于 Vue 的单文件组件支持 但 2.0 基于之前的经验提供了一个更稳定灵活的内部架构 从而可以完全通过插件机制来支持任意框架 现在 Vite 提供官方的 Vue, React, Preact, Lit Element 项目模版 而 Svelte 社区也在开发 Vite 整合方案

全新插件机制和 API


Vite 2.0WMR 的启发采用了基于 Rollup 插件 API 的设计 很多 Rollup 插件可以跟 Vite 直接兼容 插件可以在使用 Rollup 插件钩子之外使用一些额外的 Vite 特有的 API 来处理一些打包中不存在的需求 比如区分开发 vs 打包 或是自定义的热更新处理

Vite 的 JS API 也得到了大幅改进 - 已经有不少用户在开发基于 Vite 的上层框架 Nuxt 团队也已经在 Nuxt 3 中验证了初步整合的可行性

基于 esbuild 的依赖预打包


由于 Vite 是一个基于原生 ESM 的开发服务器 在启动时我们需要通过依赖预打包来达成两个目的:

  1. 减少模块 / 请求数量
  2. 支持 CommonJS 依赖 预打包只有在依赖变动时才需要执行 但在有大量依赖的项目中 每次执行还是可能会需要很长时间 Vite 之前是使用 Rollup 来执行这个过程 在 2.0 中我们切换到了 esbuild 使这个过程加快了几十倍 冷启动一个之前需要将近 30 秒预打包的项目现在只需要不到两秒 从 webpack 或其它打包工具迁移到 Vite 应该也会有类似的速度改善

更好的 CSS 支持


ViteCSS 看作模块系统中的一等公民 并且内置了一下支持:

  • 强化路径解析:CSS 中的 import 和 url() 路径都通过 Vite 的路径解析器来解析 从而支持 alias 和 npm 依赖

  • 自动 URL 改写:所有 url() 路径都会被自动改写从而确保在开发和构建中都指向正确的文件路径

  • CSS 代码分割:构建时每一个被分割的 JS 文件都会自动生成一个对应的 CSS 文件 并且两个文件会被自动并行按需加载

服务端渲染 (SSR) 支持


Vite 2.0 提供实验性的 SSR 支持 Vite 提供一个灵活的 API 来在 Node.js 中高效率地直接加载 ESM 源码(并且同样有精准的更新而不需要打包) 提供 CommonJS 版本的依赖会在 SSR 时自动被跳过转换直接加载 生产环境下 服务器可以和 Vite 完全解耦 基于 Vite SSR 的架构也可以很方便的做静态预渲染(SSG)

旧浏览器支持


Vite 默认只支持原生支持 ESM 的现代浏览器 但可以通过官方的 @vitejs/plugin-legacy 来支持旧浏览器 legacy 插件会自动额外生成一个针对旧浏览器的包 并且在 html 中插入根据浏览器 ESM 支持来选择性加载对应包的代码(类似 vue-cli 的 modern mode)

尝试一下


功能很多 但是试一下其实很简单 只需要一分钟 用以下命令就可以迅速搭起一个基于 vite 的项目(确保你的 Node.js 版本 >=12):

npm init @vitejs/app

Vite 官方文档还加入了从 Vite 1.0 迁移至 Vite 2.0 的说明:
https://cn.vitejs.dev/guide/migration.html

上一篇
✨ JavaScript的一些小技巧
下一篇
🗑️ 垃圾代码书写准则