终于 Remix 开始支持 Vite 了！

一、事情的开始

今年在学习 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 项目

sql 复制代码

npx create-remix@nightly --template pcattori/remix-template-vite

七、实验性版本 remix 包

json 复制代码

{
  "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 使用变化

diff 复制代码

-import styles from "./styles.css";
+import styles from "./styles.css?url";

注意后面需要使用功能 ?url 参数,显式导入为一个 URL。

九、路径别名

npm install -D vite-tsconfig-paths

或者直接配置 vite 的别名。这里推荐使用使用插件处理, 更加简单。

十、基本 vite 配置文件

ts 复制代码

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 组件之前

diff 复制代码

// app/root.tsx
export default function App() {
  return (
    <html lang="en">
       /* other */
      <body>
        <Outlet />
        <ScrollRestoration />
+        <LiveReload />
        <Scripts />
-        <LiveReload />
      </body>
    </html>
  );
}

十三、tailwindcss 支持

sh 复制代码

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init --ts -p

13.1）配置 tailwindcss 配置文件

diff 复制代码

import type { Config } from "tailwindcss";

export default {
+  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

13.2）导入 tailwindcss 配置

css 复制代码

@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 结合能很好的提升编程体验。