Vue 3.0 + Taiwind CSS 项目优化

上期视频我们把前端连接到了后端，展示了真实的留言和回复列表，但是遗留了几个问题，比如说项目编译的过程比较慢，另外 Notion API 在新增之后，查询列表有一定的延迟，返回速度比较慢。那么这期视频我们来看一下，如何给咱们的项目来优化一下。

开启 Tailwind CSS JIT 模式

首先，在开发的时候，会发现 vite 的编译速度比较慢，这个是因为 Tailwind CSS 库的编译时间比较长，因为他会产生很多 CSS 样式，但是在 Tailwind 2.1 版本以上，它可以开启 JIT，Just-In-Time 即时编译模式，只根据组件所用的 CSS 来编译成最小的文件。那么我们可以先开启一下 Tailwind CSS JIT 模式，看一下启动速度的差距。 ​ 我们先打开 tailwind.config.js文件，在 module.exports 这个对象里边再导出一个 mode 属性，值为 jit，然后在 purge里边我们还需要加上 vue 组件，这样它会扫描 vue 组件源文件，把里面的 css 进行处理。我们这里写上 "./src/**/*.{vue,js}"，这样他就会匹配 src下所有文件夹下边的，所有以 .vue 和 .js 结尾的的文件：

// tailwind.config.js

module.exports = {
  mode: "jit",
  purge: ["./index.html", "./src/**/*.{vue,js}"],
};

现在来测试一下打包速度。先删除以前已经编译好的缓存，用 rm -rf node_modules/.vite 命令，node_modules/.vite 里就是 vite 编译好的缓存：

rm -rf node_modules/.vite

再运行一下 yarn dev：

yarn dev

可以看到这个速度就快多了。如果我们关了 JIT 模式，再删除一下缓存、再启动一下，可以看到这个速度就慢了许多。我们把 JIT 加回来。

自动打开浏览器

现在项目启动后，还得需要我们手动去打开浏览器，我们想在 vite server 启动的时候自动打开浏览器，那么可以配置让 vite 自动帮我们打开。在 vite.config.js 配置文件里边，server 配置项里边，再加上一个 open，然后值为 true。这样就能自动打开浏览器了。

// vite.config.js
export default defineConfig({
  plugins: [vue()],
  server: {
    open: true,
    // ...
  },
});

再运行一下 yarn dev，可以看到浏览器就自动打开了。

加速新留言展示

我们现在来处理一下之前发表留言的时候，再通过 Notion API 去查留言列表时，需要等待一些时间的问题。我们可以在添加完留言或者是发表完回复之后，先把 Notion 返回的新的 page，也就是留言对象，先返回出来，在前端接收到之后，直接在本地给它追加到 comments 这个留言列表里面。等用户什么时候刷新的时候，再去 Notion 自动抓取所有的留言列表，这样的话能够提升一些响应速度。

升级 Notion Client 版本

好，我们先升级一下 Notion API Client 的版本。之前 Notion API version 还是 5 月份，而他现在没已经更新到了 8 月，所以先更新一下它，可能会解决一些常见的问题。运行 yarn upgrade @notionhq/client 进行升级：

yarn upgrade @notionhq/client

修改后端接口

接下来，我们在 server.js 里改一下后端的接口，因为之前我们在获取所有留言列表的时候，会把这个原来的留言列表对象转化成前端所需要的简化形式，后面在返回新添加的留言对象的时候，也需要这样转换一下，那么我们就先把这个转化逻辑定义成一个通用的转换函数，我们在底下定义这个函数 transformPageObject：

// app.js
function transformPageObject(page) {
  return {
    id: page.id,
    user: page.properties.user.rich_text[0].text.content,
    time: getRelativeTimeDesc(page.properties.time.created_time),
    content: page.properties.content.rich_text[0].text.content,
    avatar: page.properties.avatar.url,
    replies: page.properties.replies.relation,
    replyTo: page.properties.replyTo?.relation[0]?.id,
  };
}

transformPageObject 函数接收 page 作为参数，也就是留言对象，返回转化后的简单版本。里边的转化逻辑不变，之后先让获取全部留言的 函数， getAllComments() ，用上这个函数：

// app.js
async function getAllComments() {
  // ...
  result?.results?.forEach((page) => {
    comments.set(page.id, transformPageObject(page));
  });
  // ...
}

再看一下添加新留言的这个 API 处理函数 addComment()，我们这里 await notion.request 发出请求之后，并没有接收它的返回值，我们这里接收一下：

async function addComment({ content, replyTo = "" }) {
  // ...

  const page = await notion.request({
    // ...
  });
  return transformPageObject(page);
}

这样在接收到返回的新 page 对象后，把它转化后的结果返回出去。再在 app.post("/api/comments")这个处理添加新留言的 API 里边，接收新添加的留言对象并返回给客户端：

app.post("/api/comments", async (req, res) => {
  try {
    const newPage = await addComment(req.body);
    res.status(201).json(newPage);
  }
  // ...
});

这样我们的后端接口就改完了。

修改前端组件

我们接下来看一下前端的处理方法。打开 CommentsApp.vue 这个组件：

• 在 addNewComment()这个函数里边，先接收 fetch 的返回结果。
• 再把 res 转换为 json() 格式。
• 之后判断，如果它是顶级留言对象，replyTo 没有值，那么我们就把它追加到留言列表的最前面。这里使用了 unshift()。
• 如果是一条留言回复的话，那么我们就先找到他回复的那条顶级留言，然后在他的 replies属性中，把这个新的回复给它追加上。先用 comments.value 从 vue 的 ref 中获取真实的留言数组，然后调用 find() 方法，找一下顶级留言对象，根据 replyTo 的值和 id, 然后在它的 replies里面追加新添加的评论。
• 我们可以把这个 setTimeout()去掉了。

// CommentsApp.vue
const addNewComment = async (content, replyTo) => {
  const res = await fetch(`/api/comments`, {
    // ...
  });
  const newComment = await res.json();
  if (!replyTo) {
    comments.value.unshift(newComment);
  } else {
    comments.value.find((c) => c.id === replyTo).replies.unshift(newComment);
  }

  // 新增完评论后，自动获取新的评论列表
  // Notion API 有延迟，在添加完 page 之后，需要过一会才能获取到新的评论列表
  // setTimeout(async () => {
  //   await getAllComments();
  // }, 1000);
};

测试

来测试一下，先启动 Express Server，这里重启一下，然后再运行咱们的前端 yarn dev。编写一些测试留言，可以看到虽然还不是特别快，但是已经不用再手动编写 setTimout() 来等待了。再添加一条回复，好，功能没有问题。 这一期视频，我们主要优化了这些功能：

1. 开启 Tailwind CSS 的 Just-In-Time 即时编译模式，提高编译素的。
2. 在前端项目启动的时候，自动打开浏览器。
3. 升级了 Notion API 的版本，修改了后端的 API 接口，在添加完新的留言之后，返回这个新的留言对象。
4. 修改了前端的代码，使用后端返回的新留言对象，直接给它追加到留言列表数组里边去，如果是一条新回复的话，那么还会先找到它回复的顶级留言，再把它放到对应的回复列表里面。

好了，这个就是我们的 Vue 3.0、Tailwind CSS 和 Notion API 项目的优化过程，你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看。