ssr、vite小试

ssr、vite小试

本周除了在业务代码中加强ts和自定义hook提取业务逻辑的使用外,还去了解了一下ssr和vite,先大概记录一下react的ssr的项目和vite。

SSR

简单来说,ssr就是服务端渲染页面,之所以会有ssr的出现,是因为现如今像react、vue都是单页面应用(SPA),都是在浏览器端完成资源加载、页面渲染等,所以如果项目大了,可能会导致一些问题,像是首页加载比较慢、不利于seo之类的;

ssr简单实现

//app.js

import path from 'path'
import template from './src/template'
import ssr from './src/server'
import data from './assets/data.json'

const app = express()

// Serving static files
app.use('/assets', express.static(path.resolve(__dirname, 'assets')));
app.use('/media', express.static(path.resolve(__dirname, 'media')));

// hide powered by express
app.disable('x-powered-by');
// start the server
app.listen(process.env.PORT || 3000);

let initialState = {
  isFetching: false,
  apps: data
}

// server rendered home page
app.get('/', (req, res) => {
  const { preloadedState, content}  = ssr(initialState)
  const response = template("Server Rendered Page", preloadedState, content)
  res.setHeader('Cache-Control', 'assets, max-age=604800')
  res.send(response);
});

// Pure client side rendered page
app.get('/client', (req, res) => {
  let response = template('Client Side Rendered page')
  res.setHeader('Cache-Control', 'assets, max-age=604800')
  res.send(response)
});

复制代码

可以看到,这是一个用express起的的一个本地服务,通过app.get方法匹配请求的路由来渲染不同的页面到浏览器上

//server.js

import { renderToString } from 'react-dom/server'

import { Provider } from 'react-redux'
import configureStore from './redux/configureStore'
import App from './components/app'


module.exports = function render(initialState) {
  // Configure the store with the initial state provided
  const store = configureStore(initialState)

  // render the App store static markup ins content variable
  let content = renderToString(
    <Provider store={store} >
       <App />
    </Provider>
  );

  // Get a copy of store data to create the same store on client side 
  const preloadedState = store.getState()

  return {content, preloadedState};
}

复制代码

Vite

Vite (法语意为 "快速的",发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。

vite十分强大,它原生 ESM方式服务源码;

vite功能

NPM 依赖解析和预构建

原生 ES 引入不支持下面这样的裸模块导入:

import { someMethod } from 'my-dep'
复制代码

上面的操作将在浏览器中抛出一个错误。Vite 将在服务的所有源文件中检测此类裸模块导入,并执行以下操作:

  1. 预构建 他们以提升页面重载速度,并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由 esbuild 执行,这使得 Vite 的冷启动时间比任何基于 javascript 的打包程序都要快得多。
  2. 重写导入为合法的 URL,例如 /node_modules/.vite/my-dep.js?v=f3sf2ebd 以便浏览器能够正确导入它们。

依赖是强缓存的

Vite 通过 HTTP 头来缓存请求得到的依赖,所以如果你想要 编辑/调试 一个依赖,请跟随 这里 的步骤。

#模块热重载

Vite 提供了一套原生 ESM 的 HMR API。 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新,而无需重新加载页面或删除应用程序状态。Vite 提供了第一优先级的 HMR 集成给 Vue 单文件组件(SFC) 和 React Fast Refresh。也有对 Preact 的集成 @prefresh/vite

注意,你不需要手动设置这些 —— 当你 create an app via @vitejs/create-app 创建应用程序时,所选模板已经为你预先配置了这些。

见证了vite预构建等功能带来的快速启动,本来想在create-react-app项目中的start的时候用上vite开发,但是现阶段vite对于react的支持直到16版本,还是会存在一些问题;

简单介绍下api吧,通过

yarn create @vitejs/app
复制代码

选择对应模板就可生成react等框架,生成如图文件

WechatIMG141.png

//vite.config.ts 配置vite的一些功能

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],//插件
  resolve: {
    alias: [{ find: 'app', replacement: './src/app' },
    { find: 'store', replacement: './src/store' },
    { find: 'styles', replacement: './src/styles' },
  ],
  },
});
复制代码

现阶段还是先把webpack搞搞懂先吧,vite还不够成熟。

分类:
前端
标签: