How To Analyze and Optimize A Next.js Build
Learn how to analyze and optimize your Next.js production build. Increase performance and decrease page load times. Improve your Core Web Vitals and Page Experience.
Check out the full blog post here - https://bvgsoftware.com/blog/how-to-a...
Thanks for watching!
For a deeper dive into this topic, and many others, check out my blog at https://bvgsoftware.com
It is never too late, learn how to code today.
My channel is focused on JavaScript and PHP programming, with a particular emphasis on React and WordPress. A popular user interface library and a CMS that combine to make up a large swatch of the web. I share the knowledge I have gained in my journey as a professional web developer with the hope that my content is at least useful to somebody.
[00:00] Intro
[0:58] Bundling & Why It Matters
[3:17] Install Next Bundle Analyzer
[4:12] Configure Next Bundle Analyzer
[5:15] Run Analyze Script
[6:14] Analyze Next Build Logs
[8:00] Analyze Bundle Visualizations
[10:00] Find & Replace Bloated Legacy Dependencies
[11:35] Replace Libraries With Your Own Code
[13:02] What Are Next Dynamic Imports?
[14:57] Find Components To Import Dynamically
[20:24] Rebuild The Next Application
Other coding tutorials:
Clone Components From Popular Applications - • React Clone Components - YouTube Tags Part 1
Build A Pomodoro Clock - • Pomodoro Clock Tutorial - Part 1
Build A Drum Machine - • Drum Machine React Tutorial - Part 1
Build A Markdown Previewer - • React Markdown Previewer Tutorial
Build An Axios Progress Bar - • Axios Progress Bar - React