把vite + react 项目改造成多页面应用 🔥

背景

因为本人正在做一个基于electron、vite 和 react，我做了一个截图、录音、录屏桌面软件。在做的过程中，发现项目越来越大，这时候就要关注项目的性能了。在网站和应用开发中，页面加载速度是一个非常重要的因素。页面加载速度慢会导致用户流失，影响用户体验。因此，选择合适的页面加载方式非常重要。

在这篇技术文章中，我们将比较多页面应用和单页面应用、服务器渲染页面和懒加载页面等四种页面加载方式，并分析它们的优缺点。最后，我们将讨论如何根据实际需求选择最适合的页面加载方式。

技术

在Web开发中，我们常常面临选择采用何种技术方案来构建应用的挑战。本文将对多页面应用（Multi-page App）、单页面应用（Single-page App）、服务器渲染页面（Server-side Rendering）和懒加载页面（Lazy-loading）进行对比，帮助读者理解并选择适合其需求的技术方案。

	多页面应用	单页面应用	服务器渲染页面	懒加载页面
页面切换	通过浏览器刷新页面	通过前端路由控制	通过服务器端生成HTML并发送到客户端进行展示	通过加载可见区域的内容进行渐进式加载
加载速度	初始加载速度较快，页面切换较慢，因为需要重新加载整个页面	初始加载速度慢，页面切换较快，只更新部分内容	初始加载速度快，因为页面内容已在服务器端生成	初始加载速度较快，只加载可见区域的内容
SEO	对搜索引擎的优化相对一般，因为每个页面都需要单独进行优化	对搜索引擎的优化较差，因为整个应用只有一个HTML文件	对搜索引擎的优化较好，因为搜索引擎可以直接抓取服务器端生成的HTML	对搜索引擎的优化较差，因为页面内容会逐步加载
技术复杂度	相对较低，页面之间独立，不需要前端路由和状态管理	相对较高，需要前端路由和状态管理，更复杂的前端开发	相对高，需要服务器端渲染框架和后端开发	相对较高，可以通过JavaScript或浏览器API来实现
适用场景	适用于较简单的应用，页面加载不多，有SEO需求	适用于需要快速响应和更好用户体验的应用	适用于需要快速初始加载和SEO优化的应用	适用于长页面或包含大量媒体内容的应用

综上所述，多页面应用 、单页面应用、 服务器渲染页面、 懒加载页面各有优缺点，需要根据实际需求进行选择。如果需要提供丰富的功能和灵活的交互方式，可以选择多页面应用。如果需要提高页面加载速度和减少带宽和服务器资源的消耗，可以选择懒加载页面或服务器渲染页面。在选择页面加载方式时，需要综合考虑页面布局和导航设计、动态内容和交互处理、页面加载速度和带宽消耗等因素，选择最适合的方式。

因为本项目比较简单，而且需要对初次加载的速度有要求，同时也支持SEO，所以最后选择了多页面应用

实现

参考： cn.vitejs.dev/guide/build…

创建项目

本项目用 vite 和 react 搭建，所以可以用以下代码快速搭建

npm create vite@latest
// or

npm create vite@latest my-vue-app -- --template react-ts

修改路由

假设你有下面这样的项目文件结构

├── package.json 
├── vite.config.js 
└── src 
    └── pages
        ├── index.html
        ├── ...
        └── setting.html
        └── home
        |   ├── index.tsx
        |   └── index.module.scss
        ├── ...
        └── setting
            ├── index.tsx
            └── index.module.scss

1. 在项目文件夹里新建两个或多个html，比如 /src/pages/index.html和/src/pages/setting.html，如下图：

1. 修改/src/pages/**.html代码

// /src/pages/index.html
<div id="root"></div>
<script type="module" src="./home/index.tsx"></script>

1. 修改/src/pages/main.tsx代码

import { createRoot } from "react-dom/client";
import "./index.scss";

export default function initApp(App) {
    const container = document.getElementById("root") as HTMLElement;
    const root = createRoot(container);
    root.render(<App />);
}

1. 修改/src/pages/**/index.tsx代码

///src/pages/setting/index.tsx

import React, { useEffect, useRef, useState } from "react";
import ininitApp from "@/pages/main";
import styles from "./index.module.scss";

const Setting = () => {
	

	return (
		<div>Setting</div>
	);
};

ininitApp(Setting);

export default Setting;

修改vite 配置文件

在构建过程中，你只需指定多个 .html 文件作为入口点即可：

//vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
export default defineConfig({ 
    build: { 
        rollupOptions: { 
            input: { 
                index: resolve(__dirname, "src/pages/index.html"),
                // ...
                setting: resolve(__dirname, "src/pages/setting.html"),
                }, 
            }, 
         }, 
         outDir: resolve(__dirname, "dist"),
})

启动和打包

 "scripts": {
    "dev": "vite",
    "build": "rimraf dist && tsc && vite build",
    "watch": "tsc && vite build --mode lib -w",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

这样一个多页面项目就搭建完成了。

总结

文章写到这里基本结束了，简单回顾下文章的内容。

• Q: 有源码吗？

当然有，地址如下：github.com/027xiguapi/…，有兴趣的话可以大家一起探讨，同时也欢迎大家fork和star