内容提要
Next.js 8发布了无服务器模式、减少构建时内存使用、环境配置、预取性能提升和更小的初始HTML大小。每个页面变为无服务器函数,支持快速冷启动。开发体验得到改善,支持按需编译和更快的端口监听。此外,安全性得到优化,移除了内联JavaScript,增强了API认证示例。
延伸解读
无服务器模式:按页拆分的利与弊
Next.js 8 的无服务器模式将每个页面编译为独立的 Lambda 函数,带来弹性伸缩和按使用付费的优势。但需注意,该模式不支持 publicRuntimeConfig 和 serverRuntimeConfig,必须改用构建时环境配置。此外,每个函数需通过兼容层适配不同平台,且冷启动速度虽经优化,仍可能受函数体积影响。
构建内存优化:Webpack 贡献的连锁效应
Next.js 团队对 Webpack 的改进使构建时内存使用降低最多 16 倍,且不损失性能。这意味着大型项目在构建时更不易因内存不足而崩溃,同时内存释放更快,提升了开发效率。这一优化不仅惠及 Next.js,也惠及整个 Webpack 生态,体现了对上游的贡献。
预取策略调整:更智能的资源加载
Next.js 8 将预取从 <script> 标签改为 <link rel="preload">,并延迟到 onload 后开始,避免阻塞页面加载指示。同时,它会检测 2G 网络和 saveData 模式,自动禁用预取,防止在慢速连接下浪费带宽。这些改进让预取更符合浏览器资源管理机制,提升了用户体验。
安全增强:移除内联脚本与跨域配置
Next.js 8 移除了内联 JavaScript,改用 JSON 标签传递数据,使开发者可以更安全地使用 CSP 的 script-src 'self',减少 XSS 风险。新增的 crossOrigin 配置选项统一为所有脚本标签设置跨域属性,无需再自定义 _document.js。这些变化降低了安全配置的复杂度,但升级时需注意旧配置的警告提示。
Q&A
Next.js 8的无服务器模式有什么优势?
无服务器模式将每个页面变为独立的无服务器函数,提升了可靠性和可扩展性,支持快速冷启动。
Next.js 8如何减少构建时内存使用?
通过优化Webpack性能,Next.js 8实现了最多16倍的内存使用改善,内存释放更快,避免了进程崩溃。
Next.js 8的环境配置功能是如何实现的?
新增的env键允许在next.config.js中提供配置值,支持在代码中注入环境变量。
Next.js 8如何提升页面加载速度?
通过使用<link rel="preload">替代<script>标签进行预取,优化了页面加载性能。
Next.js 8在安全性方面做了哪些改进?
移除了内联JavaScript,增强了API认证示例,并新增了crossOrigin配置选项。
Next.js 8如何改善开发体验?
支持按需编译和更快的端口监听,减少了开发服务器启动时的等待时间。