VitePress:Vite & Vue 驱动的静态网站生成器

VitePress:Vite & Vue 驱动的静态网站生成器 https://github.com/vuejs/vitepress

VuePress的小兄弟,建立在vite的基础上

npm install -D vitepress
echo '# Hello VitePress' > index.md

# starts dev server
npx vitepress

# build > .vitepress/dist
npx vitepress build

注意,这是早期的WIP! 默认的主题是不存在的,但基本的工作流程是有的。

定制化

可以通过.vitepress/config.js进行配置(见src/config.ts)。

您可以通过添加以下文件来开发您的自定义主题。

.vitepress/theme/Layout.vue

<template>
  <h1>Custom Layout!</h1>
  <Content/><!-- make sure to include markdown outlet -->
</template>

.vitepress/theme/index.js

import Layout from './Layout.vue'

export default {
  Layout,
  NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
  enhanceApp({ app, router, siteData }) {
    // app is the Vue 3 app instance from createApp()
    // router is VitePress' custom router (see `lib/app/router.js`)
    // siteData is a ref of current site-level metadata.
  }
}

与VuePress不同,在一个主题中唯一有固定位置的文件是index.js—-其他的东西都是在那里导入和导出,就像在一个普通的应用程序中一样。

动机

我喜欢VuePress,但是构建在webpack之上,为一个只有几个页面的简单文档站点启动dev服务器所需的时间正变得难以忍受。即使是HMR更新也可能需要几秒钟才能在浏览器中反映出来!

作为一个参考,Composition API RFC repo只有两页,但启动服务器需要4秒,而任何编辑在浏览器中反映出来的时间几乎是2秒。

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

顺便说一下,vite很好地解决了这些问题:几乎是即时启动服务器,按需编译,只编译正在服务的页面,以及快速的HMR。此外,还有一些额外的设计问题,我在VuePress中注意到了一些额外的设计问题,但由于需要大量的重构,所以一直没有时间去解决。

现在,借助vite和Vue 3,现在应该重新考虑“ Vue驱动的静态站点生成器”的真正含义了。

对VuePress的改进

1.使用Vue 3

利用Vue 3改进的模板静态分析来尽可能对静态内容进行分类。 静态内容是作为字符串文字而不是JavaScript呈现函数代码发送的-JS有效负载因此解析起来便宜得多,并且合成也变得更快。

注意,在应用优化的同时,用户仍然可以在标记内容中自由混合Vue组件 – 编译器会自动为你做静态/动态分离,你永远不需要考虑。

2.在后台使用vite

  1. 开发服务器启动更快
  2. 更快的热更新
  3. 更快的构建(内部使用汇总)

3.页面更轻

  1. Vue 3 tree-shaking + Rollup 代码分割。
  2. 不为每个请求的每个页面发送元数据。这将使页面权重与页面总数解耦。只发送当前页面的元数据。客户端导航会将新页面的组件和元数据一起获取。
  3. 不使用vue-router,因为VitePress的需求是非常简单和具体的–使用一个简单的自定义路由器(200LOC以下)来代替。
  4. (WIP) i18n locale数据也要按需获取。

其他的区别

更多固定内容,可配置性更低。VitePress的目标是缩减当前VuePress的复杂性,并从极简主义的根源上重新出发。

面向未来:VitePress只针对支持原生ES模块导入的浏览器。它鼓励使用原生JavaScript和CSS变量进行主题设计。

这将成为未来的下一个VuePress吗?

也许! 当前使用的是另一个名称,因此我们不会过分致力于与当前VuePress生态系统(主要是主题和插件)的兼容性。 我们将看到在不损害上面列出的设计目标的情况下可以达到的距离。 但是总的想法是,VitePress将具有尽可能少的主题API(最好使用JavaScript API而不是文件布局约定),并且可能没有插件(所有自定义均在主题中完成)。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流