Next.js Optimizes Packet Imports

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.

[画像:nextjs]

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 <img> element with features for automatic image optimization.

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.

[画像:nextjs]

More Information

Next.JS Site

Next.JS On GitHub

Related Articles

Next.js Updates Runtime

Next.js Improves Data Fetching

Next.js 5 Improves Webpack Support

TypeScript 2.7 Improves Type Inference

React 16 Adds Fragments

React 15.5 Gets Ready For Rewrite

React 15 Released

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

pico book

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

Last Updated ( Thursday, 21 September 2023 )