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/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

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

vite十分强大，它原生 ESM方式服务源码；

vite功能

NPM 依赖解析和预构建

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

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

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

预构建他们以提升页面重载速度，并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由 esbuild 执行，这使得 Vite 的冷启动时间比任何基于 javascript 的打包程序都要快得多。
重写导入为合法的 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等框架，生成如图文件

//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还不够成熟。