IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 什么是 VitePress? -> 正文阅读

[JavaScript知识库]什么是 VitePress?

VuePress 是 Vue 驱动的静态网站生成器,享受 Vue + webpack 的开发体验,可以在 Markdown 中使用 Vue 组件,又可以使用 Vue 来开发自定义主题。VuePress 会为每个页面预渲染生成静态的 HTML。

VitePress 是 VuePress 的兄弟(替代品),建立在Vite之上。

虽然 VuePress v1 很好,但是构建在 Webpack 之上,为一个只有几页的简单文档站点启动开发服务器所花费的时间变得难以忍受。即使是 HMR 更新也可能需要几秒钟才能反映在浏览器中!

从根本上说,这是因为 VuePress v1 是一个底层的 Webpack 应用程序。即使只有两页,它也是一个完整的 Webpack 项目(包括所有主题源文件)进行编译。当项目有很多页面时,情况会变得更糟——每个页面都必须首先完全编译,然后服务器才能显示任何内容!

顺便说一句,Vite 很好地解决了这些问题:几乎即时的服务器启动、仅编译正在服务的页面的按需编译以及闪电般的 HMR。

对 VuePress v1 的改进

利用 Vue 3 改进的模板静态分析来尽可能地对静态内容进行字符串化。静态内容以字符串文字而不是 JavaScript 渲染函数代码的形式发送——因此 JS 有效负载的解析成本要低得多,并且更新也变得更快。

使用 Vite

  1. 更快的开发服务器启动
  2. 更快的热更新
  3. 更快的构建

页面更轻巧

  1. Vue 3 tree-shaking + Rollup 代码拆分
  2. 不会为每个请求的每个页面发送元数据。这将页面权重与页面总数分离。仅发送当前页面的元数据。客户端导航将新页面的组件和元数据一起获取。
  3. 不使用vue-router,因为 VitePress 的需求非常简单和具体 - 使用简单的自定义路由器代替。
  4. i18n 语言环境数据也应该按需加载。

其他差异

VitePress 更加固执己见且可配置性更低:VitePress 宗旨在缩减当前 VuePress 的复杂性,并从其极简主义根源重新开始。

VitePress 面向未来:VitePress 仅针对支持原生 ES 模块导入的浏览器。它鼓励使用原生 JavaScript 而不进行编译,并使用 CSS 变量进行主题化。

总结

VitePress 是 VuePress 的孪生兄弟,它同样由 Vue.js 团队创建和维护。 VitePress 甚至比 VuePress 要更轻更快,但它在灵活性和可配置性上作出了一些让步,比如它不支持插件系统。当然,如果你没有进阶的定制化需求, VitePress 已经足够支持你将你的内容部署到线上。

VitePress 与当前的 VuePress 生态系统(主要是主题和插件)不兼容。总体思路是,VitePress 将拥有一个更精简的主题 API。

下面对比说明一下

框架名称说明特点
VuePress v1vuepress的v1版本Vue 和 Vue Router和 Webpack
vuepress-nextvuepress的v2版本Vue 和 Vue Router 和 [Vite/Webpack]
VitePress特别精简版Vue3 和 Vite

VuePress 一直以来都在使用 Webpack 作为打包工具来进行网站的开发和构建。从 VuePress v2 开始,我们还支持使用其他的打包工具,并且现在使用 Vite 作为默认的打包工具。当然,你仍然可以选择使用 Webpack 。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-05 11:09:15  更:2022-05-05 11:12:47 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:11:54-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码