The Loop

JavaScript developer Marvin Hagemeister has written an illuminating blog post about the way that barrel files can have unwanted effects on large projects’ performance. Barrel files are JS files that contain no code themselves and only import/export other code. While it’s usually fine to include the occasional barrel file in a project, littering them throughout an entire codebase can have a drastic impact on performance.

• Bundle files became popular in the JS ecosystem as a way to minimize import statements, giving rise to a pattern wherein every folder got its own index.js file that only imported and re-exported code from other files in the same directory
• This pattern results in an unnecessarily complex module graph that slows down performance considerably
• Bundlers’ main function is to flatten the module import graph; using a bundler on a project full of barrel files shows the impact that barrel files have on a project’s performance
• A common misconception among JS developers is that modules are loaded only when needed; this is not true - doing so would break code relying on globals or module execution order
• Some of the most negative effects of barrel files can be felt when running tests because each test file needs to flatten the module graph
• Removing all barrel files can immediately make a project’s tasks 60-80% faster

Another solution to the barrel file conundrum is to use Next.js. A new feature in Next.js 13.5 automatically optimizes package imports and optimizes a project’s module graph, which means it knows how to handle barrel files.

• Next’s optimizePackageImports option analyzes entry files to determine if they are barrel files and then automatically map all imports
• A list of common libraries that benefit are available here​
• These optimizations have led to faster local development time, quicker production builds, and faster cold starts
  • Local development saw a 15% to 70% time boost depending on the library used
  • Production builds ran approximately 28% faster
  • Cold boots in serverless environments like Vercel ran up to 40% faster

Optimizing package imports is just one reason to check out the latest updates from Next.js. A host of other features and improvements are available in Next.js 14, the framework’s latest major release.

• Since the release of version 13, Next has been working to improve local development performance in both the Pages and the App router; these efforts have been concentrated in developing Turbopack, Next’s underlying rust engine
• Since the release of version 13, Next has been working to improve local development performance in both the Pages and the App router
  • These efforts have been concentrated in developing Turbopack, Next’s underlying rust engine
  • As of Next 14, 5,000 (90%) integration tests are now passing for next dev with Turbopack
  • Testing shows a 53.3% faster local server startup time and up to 94.7% faster code updates with Fast Refresh
  • Once 100% of tests are passing, Next will move Turbopack to stable in a minor release
• Server Actions are now stable
  • Server Actions allow you to define a function that runs securely on the server; they are called directly from your React components, not requiring an API route
  • In its latest release Next has upgraded to the latest React canary channel, which includes stable Server Actions
  • Server Actions are integrated into the entire App Router model and account for caching, revalidating, rerouting, catching and displaying errors, and more
• Partial Prerendering is a compiler optimization for dynamic content with a fast initial static response
• Starting with Next 14 there are new metadata options that will replace viewport, colorScheme, and themeColor options

The latest version of Yarn is here! Check out its new features and updates:

• This latest version improves security with Hardened Mode, which prevents any attacker from surreptitiously modifying your lock files when making PRs to your project using Yarn (be aware that installs under Hardened Mode are slower due to additional network requests)
• Yarn 4.0 features faster installs: ~3.9% faster than Yarn 3.6.0
• yarn install now tells you the packages you added and their total weight
• All official plugins (e.g. typescript, interactive-tools, etc.) are included by default
• Yarn 4.0 requires Node.js 18+

Stay ahead of the curve with Econify's newsletter, "The Loop." Designed to keep employees, clients, and our valued external audience up to date with the latest developments in software news and innovation, this newsletter is your go-to source for all things cutting-edge in the tech industry.

The Loop is written and edited by Hank Mason, John Kaufmann, Noah Gribbin, Victoria Lebel, Chris Breen, and Marie Stotz.