用 TailwindCSS 打造美好祝福:给大家送上新年祝福的 demo

sxkk20081年前122
前几天,群里有有伙伴问,在 Next.js 中,该使用哪个 UI 框架?我强烈推荐 tailwindcss, 因为你不再需要写 CSS 代码了,这 2 天还录制了一个视频,包括录屏、录音、剪辑、动画等...

如何使用 ONLY OFFICE 在你的 WEB 中集成 OFFICE 文档编辑功能

sxkk20081年前64
前言在日常 WEB 开发过程中常常有附件管理的需求,而这些附件大部分是 OFFICE 文件,而对于这些办公文档,用户需要下载下来编辑,编辑完成后上传,而对于用户的改动,开发者还需要实现历史版本管理功能...

如何使用 Tailwind CSS 写官网?

sxkk20081年前92
前言在上一期视频中,我介绍了 Tailwindcss 的优点,很多小伙伴也在评论中谈论了自己的看法。 今天这期视频我们就来实战一下,如何使用 Tailwindcss 写官网?那么一起来看看吧tailb...

我在工作中使用 git 的几个技巧

sxkk20081年前78
前言Git 是每个程序员的必备技能,良好的 Git 提交习惯,不但可以让代码阅读更清晰,还可以提高我们的我们的工作效率,接下来我将分享我在工作中关于 Git 的使用经验,或许对你有帮助。Git 工作流...

如何避免 React hooks 闭包陷阱?

sxkk20081年前90
什么是 React hooks 闭包陷阱?在 react 中 提供了一些性能优化函数 react.memo 、useMemo、useCallback。const cachedValue = useMe...

Next.js 全栈开发微信公众号 Markdown 排版编辑器

sxkk20081年前93

至此我们的编辑器已经完成。当然产品细节决定产品质量,码上掘金中的例子,还需要继续打磨优化样式,加入更多功能,才可以开发出一款比较完善的产品。

云函数开发接口

为了让数据保存到云端,我选择使用云函数来开发接口,使用云数据库来保存数据。至于为什么?主要是因为便宜。

目前腾讯云开发 19.9 一月,我这里选择使用

文章为稀土掘金技术社区首发签约文章,14 天内禁止转载,14 天后未获授权禁止转载,侵权必究!阅读本文,你将收获:学会使用 Monaco Editor 开发多文件编辑器学会使用 mdx 在线编译了解了...

创建 React 应用的 7 种方式,你用过几种?

sxkk20081年前111
一:Create-React-App首先,我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)npx create-react-app my-app...

ChatGPT 以及相关开源项目体验

sxkk20081年前106
本月初,ChatGPT 以惊人的速度问世,在技术圈中引起了广泛讨论。在 GitHub 上近期还诞生了多个 ChatGPT 相关的开源项目,数量之多令人瞠目结舌,甚至 ChatGPT 独霸了大半个 Gi...

使用 Vitest 和 React Testing Library 给 Next.js 应用单元测试

sxkk20081年前91
highlight: monokai theme: vuepress文章为稀土掘金技术社区首发签约文章,14 天内禁止转载,14 天后未获授权禁止转载,侵权必究!前言在前面的文章中我们使用了 Next...

你好,Next.js 13

sxkk20081年前121

这是启动后的界面,这个 demo 不是一个简单的页面,而是一个包含了深度嵌套路由的例子。

下图我开发时的截图,Turbopack 直接在命令行中打印出了构建时间,我们看到启动时间只需要 2.3ms

更新速度

试着修改代码,程序会自动热更新,绝大多数次数更新时间都很快,但偶尔有几次更新时间却很长,图片中有一处需要 16s(我使用的是 Mac M1),这其中的原因就不得而知了,尤大也发布了测评,使用 1000 个节点来对比更新速度,数据显示:根组件与 vite 时间几乎相同,叶子节点比 vite 快 68%,与官方称比 vite 快 10 倍相差甚远。当然目前 Turbopack 还处于 alpha 阶段,期待 Turbopack 能够尽快推出正式版。

Turbopack 特点

  • 开箱即用 TypeScript, JSX, CSS, CSS Modules, WebAssembly 等
  • 增量计算: Turbopack 是建立在 Turbo 之上的,Turbo 是基于 Rust 的开源、增量记忆化框架,除了可以缓存代码,还可以缓存函数运行结果。
  • 懒编译:例如,如果访问 localhost:3000,它将仅打包 pages/index.jsx,以及导入的模块。

为什么不选择 Vite 和 Esbuild?

Vite 依赖于浏览器的原生 ES Modules 系统,不需要打包代码,这种方法只需要转换单个 JS 文件,响应更新很快,但是如果文件过多,这种方式会导致浏览器大量级联网络请求,会导致启动时间相对较慢。所以作者选择同 webpack 一样方式,打包,但是使用了 Turbo 构建引擎,一个增量记忆化框架,永远不会重复相同的工作。

Esbuild 是一个非常快速的打包工具,但它并没有做太多的缓存,也没有 HMR(热更新),所以在开发环境下不适用。

theme: vuepress highlight: monokai文章为稀土掘金技术社区首发签约文章,14 天内禁止转载,14 天后未获授权禁止转载,侵权必究!前言上周发布了 Next.js 的一个...