本周除了在业务代码中加强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还不够成熟。