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上的幫助；請嘗試一下，推薦新功能並發出內容。您還可以查看問題，以查看是否可以處理一些問題。

執照

麻省理工學院