|Next.js Optimizes Packet Imports|
|Written by Kay Ewbank|
|Thursday, 21 September 2023|
Next.js has been updated with faster server startups, lower memory use and optimized packet imports.
Next.js is a page-based routing system with support for dynamic routes. It automatically statically optimizes pages when possible, and carries out server-side rendering of pages with blocking data requirements.
The first change to the new release is better performance and reliability for App Router applications. Comparing version 13.4 to 13.5, the developers report 22% faster local server startup, along with 29% faster hot module replacement (HMR) for fast refresh, and 40% less memory usage for new applications. They attribute the performance increase to optimizations including doing less work by caching or minimizing slow operations, optimizing expensive file system operations, better incremental tree traversal during compilation, and moving unnecessary blocking synchronous calls to be lazy. The changes mean some users have reported that compilation is up to 90% faster.
The other change of note to this version is optimized package imports. The team says this improves both local dev performance and production cold starts when using large icon or component libraries or other dependencies that re-export hundreds or thousands of modules.
Support for modularizing imports had already been added, which meant developers could configure how imports should resolve when using such libraries. This solution has been superceded with the new optimizePackageImports, which doesn't require you to specify the mapping of imports, but instead will automatically optimize imports for you, and will only load the modules you are actually using, while still giving you the convenience of writing import statements with many named exports.
The main other reported change is a new experimental function for next/image, which extends the HTML
The new unstable_getImgProps() function is intended for use where you don't want to use the <Image> component directly, such as when working with background images,image-set, canvas context.drawImage(), or Light/Dark Mode images.
Next.js 13.5 is available now.
or email your comment to: email@example.com
|Last Updated ( Thursday, 21 September 2023 )|