背景
最近在探索react生态的时候，发现Nextjs和turbopack在前端圈子里面比较火，但是之前没有接触过，就想从更加细致的维度去探索一下这两个出圈的框架和打包工具。
From：【2023】前端趋势前瞻，学起来！ - 掘金 (juejin.cn)
Nextjs13的改变
官网：Getting Started | Next.js (nextjs.org)
新引入app文件夹
在Nextjs13中修改了很多组件API方面的用法，为了避免和之前的page文件夹中的组件发生冲突，因此在Nextjs13中引入了app文件夹，来在此文件夹中使用全新的组件API。同时为了更好地表现优化，因此在app文件夹中的所有组件都会默认为服务端组件。
约定的文件结构和组件的分层结构
在nextjs13中为了更好地去优化组件行为，因此对组件的结构进行了约定。
layout.js（在多个页面之间共享 UI。在导航时，布局会保留状态、保持交互并且不会重新呈现。在 next 12 中，每次进入路由，页面都会重新渲染一遍 UI，想要实现像 spa 单页面应用的体验是件比较麻烦的事情，得益于 layout，nextjs 从此可以很轻松的实现持久化缓存。template.js（该路由下的公共模版，与 layout 跨路由保持状态不同，template 在切换路由时会刷新。）error.js(React error boundary)loading.js(React suspense boundary)not-found.js(React error boundary)page.jsor nestedlayout.js
好处：可以进行部分渲染 当在同级路线之间导航时（例如下面的/dashboard/setting和/dashboard/analytics），Next.js将只获取和呈现layouts和在当前路由下改变的pages。它不会重新获取或重新渲染子树中片段上方的任何内容。这意味着在共享layout的路由中，当用户在同级页面之间导航时，将保留布局。
如果没有部分渲染，每次导航都会导致整个页面在服务器上重新呈现。仅渲染正在更新的组件可以减少传输的数据量和执行时间，从而提高性能。
约定的文件夹结构定义路由
为了增加开发人员的开发便捷性和减少开发人员配置的心智负担，所以这里采用文件夹的层叠模式来获得路由的多样化
Turbopack带来了什么优化
传闻Turbopack可以有超越700x的开发体验于是非常好奇。
这里来探索下Turbopack是如何做到这一点的。
使用增量计算
有两种方法可以使编译流程更快：少做工作（do less work）或并行工作（do work in parallel）。因此Turbopack尝试去通过只编译你需要的代码去减少开始编译时间。 这里Turbopack主要做了两个步骤：
- 按需加载页面级别的请求 （只有访问到对应页面才会开始去编译对应页面的代码）例如：当你导航到/user页面的时候，会去编译该页面下的客户端，服务端组件，动态引入模块等。
- 按需编译请求级别的数据 （增量编译需要请求的css等文件）
更细级别的缓存
为了能够在更细的级别去优化编译能力，因此提出对访问函数进行缓存。将函数的访问结果存储在内存中，一旦需要用到的时候可以直接提取出来使用，而不需要二次编译执行。
Nextjs13结合Turbopack实际体会
现如今可以使用Next.js13结合Turbopack开启使用Turbopack Configuring: Turbopack | Next.js (nextjs.org)
总体开发起来的话在首次编译首屏的感受还是比较舒适的，体验秒开秒编译的感觉。但是在点击首屏中的其他模块的时候，就会有一种延时比较大的点击迟钝感，这由于Turbopack是针对组件和请求级别的，因此不会预先去加载这一个模块，这在webpack时代不会出现这一种事情。但是在二次点击的时候就不会出现需要重新编译拉取的情况了，在这一种情况下的开发体验比较流畅，回归我们的开发流程中，大部分我们都是在围绕着一个模块进行开发，因此这一个无关模块的点击延迟在开发不复杂模块的情况下还是可以被接受的。
总结
从开发体验来说，在初始开发零散组件由于入口组件比较零散，而Turbopack又是增量编译的可能会导致开发体验的劣化。但在开发巨石项目的时候，使用这一种增量编译和缓存的打包工具有利于减少编译时间进而优化开发体验。
从生态拓展性来看，Turbopack目前只可以使用到Nextjs13中，之后才会有webpack等兼容打包能力，以及类似于webpack的插件，loader开放能力等都还在建设中，Turbopack还需要一段比较长的路去补全其开发生态。
从发展空间来看，Turbopack由webpack的作者创建，汲取了大量webpack的软件架构打包经验，并且广泛学习市面上比较优异的构建工具如Google的Bazel，开发团队能力过硬并且还有着Vercel这一个大公司在背后助力，可以说未来可期。
