In modern JavaScript applications, bundle size can become a significant issue. Users don’t want to download a large package of JavaScript just to load the first page of an app. By default, when you ship a Web App built with Webpack bundling, the bundle contains code that might never be executed if the user only interacts with a specific page. One way to address this problem is through code splitting....
Dynamic imports are a new and upcoming feature in JavaScript that offer a range of possibilities. Recently, I had the opportunity to use dynamic imports in a Next.js application for code splitting. While they are similar to static imports, there are a few differences worth exploring. To begin with, a static import of an ES Module’s default export follows this syntax: import moment from 'moment' In the case of named exports, object destructuring is used:...
In a Next.js app, the code is divided into different bundles to enhance performance. These bundles are loaded as JavaScript files when you view the page source of the app. To break down the code and make it more understandable, let’s use an HTML formatter: <!DOCTYPE html> <html> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> <meta name="next-head-count" content="2" /> <link rel="preload" href="/_next/static/development/pages/index.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/runtime/webpack....