Въведение
Всички знаем, че Next.ks е доста тежък, особено в сравнение със Svelte Kit или Nuxt.js и оптимизацията не е любимото нещо на всеки. Собственикът на вашия продукт може да не иска да губи време за оптимизиране и да предпочете функции за доставка. Вашият QA и тестер може да не искат да тестват регресионно всички функции, които може да бъдат засегнати.
Тази статия е прост урок за оптимизиране на Next.js, така че можете да постигнете по-добра производителност, резултат на фара... за най-кратко време
Преместете вашите скриптове на трети страни
Ако приложението ви има Google Analytics, Hotjar, Facebook Pixel… или други скриптове на трети страни. Може да искате да преместите тези скриптове в обслужващи работници и извън основната нишка.
Имам статия за това точно тук
Повярвайте ми, няма да отнеме много време и резултатите може да ви изненадат.
Използвайте динамично импортиране
Next.js поддържа мързеливо зареждане на външни библиотеки с import()
и React компоненти с next/dynamic
. Отложеното зареждане помага да се подобри първоначалната производителност на зареждане чрез намаляване на количеството JavaScript, необходимо за изобразяване на страницата. Компонентите или библиотеките се импортират и включват в JavaScript пакета само когато се използват.
next/dynamic
е разширение на React.lazy
. Когато се използват в комбинация с Suspense
, компонентите могат да забавят хидратацията, докато границата на Suspense бъде разрешена.
Например моята начална страница има 4 големи блока, но само един от тях се показва при първото зареждане, потребителят трябва да превърти, за да види други блокове. Така че не искам всичките 4 да се зареждат първо:
const Overview = dynamic(() => import('./Overview')); const Project = dynamic(() => import('./Projects')); const Contact = dynamic(() => import('./Contact'));
Сега нека да видим резултатите
Преди:
След:
Можете да видите, че първото зареждане на JS е намалено от 115kb на 100kb, не много, но това е честна работа
Preact вместо React
Next.js е изграден върху React, но Preact е JavaScript библиотека, считана за леката 3kb алтернатива на React със същия модерен API и поддръжка на ECMA Script.
Така че, ако приложението ви е обикновено приложение Next.js, не виждам причина да не използвате Preact. Недостатъкът му е просто липсата на подкрепа от общността.
Как да приложим:
- Първо, трябва да инсталирате Preact
- Отворете своя
next.config.js
файл и преназначете реакция:
webpack: (config, { dev, isServer }) => { if (!dev && !isServer) { Object.assign(config.resolve.alias, { react: 'preact/compat', 'react-dom/test-utils': 'preact/test-utils', 'react-dom': 'preact/compat', }); } return config; },
Сега вижте изпълнението:
Размерът на пакета е значително по-малък.
Но не само това, нека го видим в производство:
Преди
След
Можете да видите, че всички JS файлове са по-малки.
Заключение
Има много други начини да подобрите ефективността на приложението си, но те изискват повече работа и проучване.
Надявам се, че методите по-горе работят за вас, ако не, моля, коментирайте по-долу и ние можем да намерим най-добрия начин!
Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitter, LinkedIn, YouTube и Discord .
Интересувате ли се от мащабиране на стартирането на вашия софтуер? Вижте Circuit.