After using NextJS for a considerable amount of time, I finally decided to take a closer look at the build folder and the console output when the build process is successful. To my surprise, I noticed something peculiar during one of these inspections.
Incorporating TypeScript into my project, I created a babel configuration that utilizes TS's settings to enable absolute paths functionality. Essentially, my components are imported using an alias ~/components, which points to ./src/components. This approach is consistent throughout the entire application, with various other absolute paths being utilized as well. However, upon building my app, I observed an interesting pattern:
https://i.sstatic.net/YTEFY.png
Every page within the app seemed to have a similar file size, including the seemingly simple 'about' and '404' pages, both exhibiting unexpectedly large sizes. My assumption was that the issue stemmed from importing modules using absolute paths, resulting in every page linking to a JavaScript file containing the entire application code. Unfortunately, I've been unable to find relevant resources online to assist me in optimizing these pages effectively. I'm uncertain whether the required adjustments should be made in webpack or babel configurations. Hence, I appeal for assistance in identifying any additional configurations necessary to ensure each page only loads the essential JavaScript code it requires.
Below are snippets of my TypeScript and Babel configurations for reference:
TypeScript Configuration:
{
"compilerOptions": {
// Configuration details
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}
Babel Configuration:
{
"presets": ["next/babel"],
"plugins": [
// Plugin details
]
}