一、事情的开始
今年在学习 React Router 的时候发现 React Router 团队还有一个上层框架 Remix, 于是对 Remix 产生了浓厚的兴趣。因为本身自己是做 React 相关开发一段时间，React Router 在 React 社区是非常出名的。Remix 也在之前开源了。本着试试看的心态开始 Remix 的编程之旅。
二、文件路由着实让人爱不释手
react router 是 Remix 团队的优势，不然可能创建不出如此优秀的文件路由。
三、为什么要将开始支持 Vite 呢?
- Remix 在开发阶段随着项目的变大，构建速度真的开始变慢了。
- Vite 在开发阶段确实快。
- 如果两者能够结合，那么开发阶段大部分的速度的体验问题将得到解决。
- 由此 Remix 更加适合做大型项目。
四、为什么会慢？
经过尝试得知，这个可能与 Remix 的编译器和设备有关。在 Remix 在普通的 Intel 和 AMD CPU(或者说非最新的芯片)类型，编译速度表现比较差。但是在最新的 Apple M2 等相关 CPU 上会有良好的表现。但是现在开始实验性的支持 vite 表示 Remix 在开发阶段会得到非常好的编程体验。
五、创建实验性的 vite 支持
需要注意的是: 基于 Vite 的 Remix 目前仍然是开发状态，不是正式版本，最好不要将其运用到生产环境。
六、nightly 脚手架
使用脚手架初始化基于 Vite 的 Remix 项目
npx create-remix@nightly --template pcattori/remix-template-vite
七、实验性版本 remix 包
{
"name": "remix-antd-admin",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"build": "vite build && vite build --ssr",
"dev": "vite dev",
"dev:express": "node ./server.mjs",
"start": "remix-serve ./build/index.js",
"start:express": "NODE_ENV=production node ./server.mjs",
"typecheck": "tsc"
},
"dependencies": {
"@remix-run/css-bundle": "0.0.0-nightly-a24520c-20231021",
"@remix-run/node": "0.0.0-nightly-a24520c-20231021",
"@remix-run/react": "0.0.0-nightly-a24520c-20231021",
"@remix-run/serve": "0.0.0-nightly-a24520c-20231021",
"isbot": "^3.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@remix-run/dev": "0.0.0-nightly-a24520c-20231021",
"@remix-run/eslint-config": "0.0.0-nightly-a24520c-20231021",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"eslint": "^8.38.0",
"typescript": "^5.1.6",
"vite": "^4.5.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
"node": ">=18.0.0"
}
}
观察看到 Remix 都是 nightly 的版本。
八、 css 使用变化
-import styles from "./styles.css";
+import styles from "./styles.css?url";
注意后面需要使用功能 ?url 参数,显式导入为一个 URL。
九、路径别名
npm install -D vite-tsconfig-paths
或者直接配置 vite 的别名。这里推荐使用使用插件处理, 更加简单。
十、基本 vite 配置文件
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [remix(), tsconfigPaths()],
});
十一、迁移到 remix cli 的 nightly 版本
对于实验性的项目使用的时候，我们一定要小心，小范围尝试，将自己的项目迁移到上面。
- 安装依赖
- 最小化路由文件/组件文件/依赖文件迁移，本质是让已经存在的项目
- 排除错误
- 重复以上必要的步骤
- 项目正常运行成功
- 失败，社区反馈和其他的
十二、组件 LiveLoad 组件需要放在 Scripts 组件之前
// app/root.tsx
export default function App() {
return (
<html lang="en">
/* other */
<body>
<Outlet />
<ScrollRestoration />
+ <LiveReload />
<Scripts />
- <LiveReload />
</body>
</html>
);
}
十三、tailwindcss 支持
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init --ts -p
13.1）配置 tailwindcss 配置文件
import type { Config } from "tailwindcss";
export default {
+ content: ["./app/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
} satisfies Config;
13.2）导入 tailwindcss 配置
@tailwind base;
@tailwind components;
@tailwind utilities;
十四、开发体验
我们增加 50 个文件路由，观察重新构建的效果和开发体验。我们定义五个 app/routes/ArticleX.tsx 路由文件，基于 Vite 的打包重建速度是效果是非常好的。并且 vite 还对 remix 的相关的包还做了优化。就速度而言整体上有了不小的提升。
十五、小结
本文主要介绍了 Remix 中使用 Vite 作为开发包工具的体验，以及 Remix 可能需要 Vite 的理由。Remix 没有使用 Vite 之前每一次修改内容，会基于 ESbuild 重新构建整个应用，前后端都需要重建，对一些比较新的高性能 CPU 笔记本而言，没有任何压力，速度非常快，但是如果不是最新的 CPU 重新构建速度会大幅度的下降。Vite 受众面已经比较广泛了，与 Remix 结合能很好的提升编程体验。
