为了更好的开发体验 Next.js启动速度提升57％

在释出Next.js 6后经过4个月，应用程序开发框架Next.js释出了第7版，这次大幅提升了开发者体验，启动速度提升57％，重新编译速度也提高42％，而这样的速度提升，部分受惠于升级编译工作管线Webpack 4和Babel 7，另外还改良了React Error Overlay，以提供更详尽好读的错误报告。

Next.js是一个在浏览器和服务器运作的JavaScript开发框架，能为React应用提供开发样板，用来开发静态或是服务器渲染应用程序。Next.js由一间名为Zeit的新创公司开发，该开发框架原本用在该公司的SaaS产品上，因此其强健性受到肯定，有许多公司便把Next.js拿来作为通用React开发框架。

Next.js 7首要让开发人员有感的，便是更好的生产效率以及开发体验，这个版本由于受惠于开源前端打包工具Webpack 4，还有JavaScript编译程序Babel 7，以及官方对内部程序代码进行了优化，现在Next.js在开发的时候，启动速度提升了57％。Next.js 7新增了增量编译快取（Incremental Compilation Cache），程序代码变更后建置时间快40％。根据官方的实验，在6.0版本，基本应用程序启动时间为1947ms，但到了7.0只需要835ms，当基本的应用程序的程序代码变更后，6.0的建置时间为304ms，而7.0只要178ms。另外，在Next.js 7中，Webpackbar将会显示开发时的实时回馈。

从Next.js第一版以来，就以Webpack作为打包程序代码的工具，让社群可以重复使用丰富的套件，Next.js 7现在更新到Webpack 4，新版本的Webpack除了修正许多错误外，还新增了不少功能，不只支持.mjs档案，也改善了程序代码拆分功能，并且支持更完善的树摇Tree-shaking检测，帮助开发者移除无用的程序代码。而且Webpack 4还支持WebAssembly，因此开发者可以执行服务器端渲染WebAssembly。

另一个Next.js 7中提升开发效率的功臣Babel 7，在前些时日刚结束测试进入稳定版，主要特色多支持了Typescript，在Next.js中开发者可以使用@zeit/next-typescript，另外还新增片段语法（Fragment Syntax）<>，还有支持babel.config.js，官方也特别强调，开发者没有在Next.js项目中自定义Babel配置，则没有需要变更改动的地方。

渲染的正确性以及错误辅助，对于开发和调校工作至关重要，除了Next.js之前的功能显示错误讯息以及堆栈追踪外，现在React Error Overlay将会显示更多丰富的堆栈讯息，包括服务器与客户端错误发生的精确位置，明显标记来源以提供上下文，以及更完整的堆栈追踪。

官方不只发表了Next.js 7，重新设计的全新官网也同时上线，其中也提供许多案例，收集了不少知名品牌与名人，使用Next.js所设计的网站，供开发者浏览参考。
文章转自：http://www.qbpc.org.cn/info.php