跳到主要内容位置

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.jsexport 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.jsfunction 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.jsasync 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.vueconst 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 项目的优化过程,你学会了吗?如果有帮助请三连,想学更多有用的前端开发知识,请关注峰华前端工程师,感谢观看。