Въведение

Всички знаем, че 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.