Дзевяць спосабоў прышвартаваць працэс разработкі ў Next.js і стварэння пакетаў для робочай сіткі

Next.js дае можлівасць для нарабаткі правіла перэхода, сервернай адрасаванні, API-шляхоў і оптымізацыі зображэнняя ў складзе з React па майжа без якога-лібо налагоджэння, і самэ гэта яшчэ больш робіць яго популярным выборам, укладаючы і праекты, створаныя за дапамогою AI. Аднак, калі праект расце, з’яўляюцца тыя ж проблемы: працэс компіляцыі стае повольным, замена модуляў адбываецца з затрымкамі, а нават мінімальныя змены ў інтэрфейсе выглядаюць повольнымі. Дзесяць секунд на компіляцыю заместо адной секунды прыносіць гады затрымакоў ў месяц, а чаканне, пакуль AI-асістэнт застосуе змены пад час перэкомпіляцыі стораніцы, ёшчэ больш раздражае.

Дазволенне AI-асістэнту аўдытаваць праект

За дапамою рэдагара коду на базе AI вам не трэба ўсі саветы застосоўваць вручную. Папросіце асістэнта параблікаваць базу коду з наведзенымі выкладкамі. Корыстны запіт — гэта калі папросіце яго пераканацца ў кожнай з практык, поясніць, чаму яна важліва, адрахаваць ўплыв на швальнасць разработкі, час будовы або час выканання, паказаць точныя змены ў кодзе і падтвердзіць усё за дапамою чынных афіцыйных дасягненняў Next.js і React. Ён павінен пазначыць саветы, якія сталі застарэлымі або не выкарыстанымі, і запропанаваць новейшыя падходы; кроме таго, ён не павінен рабіць спекулятывныя оптымізаціі, якія не падтрымваны дасягненнямі або не падходзяць да праекту.

Перагляніце все, што ён стварыў, прыяўляючы до коду. Фрэймворкі развіваюцца быстро, і тое, што дапамагало рок аднаўсця, можа стаць нерэлевантным сёння. Ставіцеся да асістэнта як да апытнага рэвізора, а не да божка. Афіцыйныя дасягненняі і патрэбы конкрэтнага прыемпляра дапрыяжу гэтаму рашэнню.

Дзевяць прыкмет, якія даўаюць рэзультаты

1. Адміністрування разработкі на Turbopack

У новейшых версіях Next.js Turbopack ўстойчыв для локальнай разработкі. Яго актывацыя адбываецца за дапамою флага:

next dev --turbopack

У тым выпадку, калі старэйшы сервер разработкі на базе Webpack працуе з большай часткаю праекта, Turbopack перзбудоввае толькі тыя модулі, якія зменіліся. У праектах серэдньага і вялікага размеру час запуску і функцыя HMR значна павышаюцца. Для стварэння версій для рэлізу все ўсё выкарыстоўваецца стандартны працэс, таму ўжыццё яго пад час разработкі не несе вялікага рызыку.

2. Прыкомпіляваць важкія залежнасці

Перапрацоўка пакетаў трэціх сторон, якія рэдка калі зменяюцца, праз кожны запуск, ёсць адной з галоўных прычын спаду часу запуску. Material UI, Monaco Editor, Three.js, Chart.js і вялікія наборы айконаў выклікаюць вялікія навантажэння ў кожны раз, калі запускаецца сервер разработкі. Next.js можа оптымізаваць імпорты для пакетаў з іменамі:

experimental: {
    optimizePackageImports: [
        "@mui/material",
        "@mui/icons-material",
        "lodash"
    ]
}

Таксама утрымайцеся ад запрашэння цэлага пакета, калі падойдзе адна толькі утыліта. Меньшыя графы залежнасцей дазволяюць быстрэй кампайляваць.

3. Адкладзіце файлы barrel

Одны файл index.ts, які занова экспортуе кожны компонент, робіць імпорты апранутымі, але вымушвае кампайляр пераглядаць набагато больш за неабяжнае колічэство файлаў. Штосьць такога імпорту праходзіць праз файл barrel:

import { Button } from "@/components";

Лепшая ўмоžнасць — імпортвація з сабеўскага шляху компаненты:

import Button from "@/components/Button";

Гэта незначныя змены, які паслябавляюць прыглед модуляў, бальш-тк у большых дапрацоўках.

4. Не включаць перакантрольванне тыпаў у сервер разработкі

Багатыя распрацоўшчыкі блакуюць свой сервер разработкі ад перакантрольвання TypeScript, якое ужо выконваецца рэдактаром. Запускайце сервер і прыглядач TypeScript як два адзеленыя працэсы:

next dev --turbopack
tsc --watch

Старонка адразу жа апдэюецца, і памылкі пад час запісу все равно ап’являюцца ў рэальным часе.

5. Храніце компаненты кліента маленькімі

У App Router кожны файл, пазначаны як "use client", потрапляе ў пакет браузера. З’ясавайце, чыякож компанент дасправа патрэбуеяе рэндаровання на кліенты. Статычныя макеты, навігацыя, сторункі з кантэнтам і запошук дадзейна часта можу застацца як серверныя компаненты, а кліентскія компаненты слід выкарыстоўваць толькі для тых частак, якім дасправа патрэбна інтэрактыўнасць. Чыгульнае цэе дапамагае адправіць менш JavaScript у браузер, а таксама значыць меньш колькасць кліентскіх модуляў, якія трэба перзбудаваць пад час разработкі.

6. Завантажвайце важкія бібліятэкі за патрэбай

Залежнасці, якія не патрэбны на першым адразе, можу чакаць. Рэдагавальнікі, прыёмнікі PDF, карты, пакеты для стварэння графікав і візуалізацыі — гэта хорашы варыянты для завантажвання з адзінакоўнасцю, толькі тады, калі хтось да яных прыходзіць:

const Editor = dynamic(() => import("./Editor"), {
    ssr: false
});

Як пачка з першымі элементамі, так і рэбілды для разработкі застаюцца значна меньшымі.

7. Раздзеліце вялікія компаненты

Вялікія компаненты сторанак замедляюць работу всіх. Сторанку, якая складаецца з сотняў ліній JSX, лепшая раздзеліць на меньшыя, можна перадаць знову і знову элементы; кампайляр легча ўтрымвае іх у кэшы, яны простэйшы для тэставання і быстрэй перабудовуюцца, калі ў чымсь зміняецца. Калі файл стае важкім для навігацыі, гэта зазвычай сігнал раздзеліць яго.

8. Выключыце непатрэбныя службы пад час разработкі

Сервісы аналітыкі, платформы для логавання, функцыі перэгляду сесый, SDK-явы для манітарынгу і скрыпты для маркетынгу маюць значэнне у працоўным рэжыме, але рэдка калі дапамагаюць пад час стварэння функцый. Запускайце іх толькі пад час працы у працоўным рэжыме:

if (process.env.NODE_ENV === "production") {
    initializeAnalytics();
    initializePWA();
}

Меншая колькасць прабязовых задач означае чыстэйшы запуск прыграмы на месцы і відсутнае выкарыстоўванне з’язноў з іншымі сеткамі пад час разработкі.

9. Налагодзіце таксама версію для рэальнай експлуатацыі

Швальнасць разработкі — толькі частка проблемы. Вярніцеся да компонента Image з Next.js замест адкрытых тэгаў зображэння, кешавайце даныя там, дзе гэта можліва, стыскайце рэсурсы і выкарыстоўвайце серверныя компоненты, каб зменшыць колькасць JavaScript-кода, які адправляецца. Час а час разглядайце сумку з кодам за дапамой аналізатора, каб як можна раней выявіць неспадзевана велікія залежнасці. Частыя маленькія прадактычныя паследжэння зазвычай эфектывнейшыя, чым адна веліка оптымаізацыя напрыканце.

З чаго пачаць

Мэтай ёсць з’ясавіць, дзе на самае працоўвае час — пад час разработкі, падчас стварэння версіі чы ў момант експлуатацыі. Пачніце з аснов: аднародны граф залежнасцяў, рэшучая падзелка коду, мінімальная колькасць JavaScript-кода на стороне кліента і інструменты, якія ужо надае Next.js. Аналізуйце змены, стварайце пасляпэльныя версіі і пераглядзайце архітэктуру ў меру росту прыграмы.

Next.js продовжае развівацца, і рэкамендацыі зменшаюцца з кожным выпускам. Незалежна ад таго, чыя змены вы прыносіце вы сабе чы ў асістэнта на базе AI, спачатку пераканайцеся, што яны супараднуюцца з найновейшымі офіцыйнымі документамі Next.js і React. Найлепшая оптымізацыя — гэта тая, якая падходзіць для версіі, на якой вы зараз працуеце, а не тая, якая была популярная ў мінулым годзе.