vitext

vitext⚡

next.js，例如React框架，以提供更好的用户和开发人员体验

• 即时服务器启动
• ？悬念支持
• sext.js喜欢API
• ？优化的构建
• ？飞行建立与出口
• 闪电SSG/SSR
• ⚡快速HMR
• ？ Vite＆Rollup兼容

Intro.mp4

 npm install vitext

Vitext（Vite + Next）是一种闪电快速SSG/SSR工具，可让您开发更好，更快的前端应用程序。它由这些主要部分组成：

即时服务器启动

开发服务器使用本机ES模块，因此您将对我的React App Server渲染和客户端渲染非常快，对我来说，您将非常快地渲染。

？悬念支持

Vitext支持悬念和懒惰的反应。

 import { lazy , Suspense } from 'react' ;

const Component = lazy ( ( ) => import ( '../components/Component' ) ) ;
const Loading = ( ) => < p > Loading the Component < / p>;

const App = ( ) => {
  return (
    < Suspense fallback = { < Loading / > } >
	  < Component / >
    < / Suspense >
  ) ;
} ;

sext.js喜欢API

如果您来自next.js背景，那么一切都会以相同的方式工作。 Vitext具有与Next.js相似的API设计。

 // pages/Page/[id].jsx
const Page = ( { id } ) => {
  return < div > { id } < / div>;
} ;

// build time + request time (SSG/SSR/ISR)
export function getProps ( { req , res , query , params } ) {
  // props for `Page` component
  return { props : { id : params . id } } ;
}

// build time (SSG)
export async function getPaths ( ) {
  // an array of { params: ... }, which every `params` goes to `getProps`  
  return {
    paths : [ { id : 1 } ] ,
  } ;
}

export default IndexPage ;

getPaths和getProps是可选的。如果getPaths的运行完成，那么每个paths项目都将传递给getProps函数，当用户请求特定页面时，他们将接收导出的HTML（SSG）。但是，如果未完成getPaths或没有用于用户请求的HTML页面，则getProps将通过请求URL的参数（SSR）被调用。

？优化的构建

ViteXT使用Vite的建筑物和捆绑方法，因此以快速而优化的方式捆绑了您的代码。

？飞行建立与出口

您无需等待应用程序的HTML导出，因为Vitext在服务您的应用程序时同时将页面导出到HTML，因此没有next export 。

闪电SSR/SSG

ES模块，快速编译和网络工人赋予Vitext SSR/SSG策略的能力，因此您将拥有惊人的快速SSR/SSG。

⚡快速HMR

ViteXT在引擎盖下使用 @vitejs/plugin-react-refresh，因此您在这里有一个快速的HMR。

？ Vite＆Rollup兼容

我们可以将Vitext称为Vite的超集；这意味着Vitext支持Vite vitext.config.js支持的一切。

 // exact Vite's config API 
export default {
  plugins : [ ... ] ,
  optimizeDeps : { ... } ,
  ...
} ; 

例子

您可以查看包装/示例目录，以查看使用ViteXT实现的示例。

贡献

我们现在处于早期阶段，因此我们需要您在Vitext上的帮助；请尝试一下，推荐新功能并发出内容。您还可以查看问题，以查看是否可以处理一些问题。

执照

麻省理工学院