Next JS дээр "Reduce JavaScript execution time" алдаанаас хэрхэн сэргийлэх вэ?

Next JS дээр "Reduce JavaScript execution time" алдаанаас хэрхэн сэргийлэх вэ?

Next.js програмын JavaScript-ийн ачааллах хугацааг багасгах нь вебийн ачааллах хурд болон хэрэглэгчийн хэрэглээг мэдэгдэхүйц сайжруулна. Үүнийг хэрэгжүүлэх хэд хэдэн арга техникийн хүргэж байна:

1. Кодын bundle хэмжээг багасгах болон Lazy loading буюу Dynamic import ашиглах

Automatic code splitting: Next.js нь таны кодыг автоматаар жижиг багц болгон хуваадаг. Гэсэн хэдий ч та онцын шаардлагагүй components хэсгүүдийг динамикаар импортлох замаар илүү оновчтой болгох боломжтой.

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));

export default function Home() { return ( <div> <h1>Home Page</h1> <DynamicComponent /> </div> ); }

2. Bundle size хэмжээг багасгах

Багцад дүн шинжилгээ хийх: Багцынхаа хэмжээг ойлгож, том хамаатай кодууд, package хэмжээг тодорхойлохын тулд дараагийн багцын дүн шинжилгээ буюу "bundle-analyzer" санг суулган ашиглана.

npm install @next/bundle-analyzer

Next.config.js дотор дараахь байдлаар тохируулна.

// next.config.js const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', });

module.exports = withBundleAnalyzer({ // additional Next.js config });

3. Төслийн шаардлагагүй сангуудыг цэгцлэх, багасгах

Жишээлбэл: Lodash - Номын санг бүхэлд нь импортлохын оронд зөвхөн хэрэгтэй функцуудыг импортолж болно.

import debounce from 'lodash/debounce';

4. Шаардлагагүй JavaScript-г багасгах

Ашиглагдаагүй код болон хамаарлыг багасгах: Өөрийн package.json-г шалгаж, ашиглагдаагүй хамаарлыг устгана уу. Polyfills зайлсхий: Зөвхөн шаардлагатай полифиллүүдийг оруулна. Орчин үеийн хөтчүүд ES6-ийн ихэнх функцуудыг дэмждэг.

5. Nextjs сангийн Image-ийг оновчтой болгох

Next.js Зургийн оновчтой болгох: Зургийг автоматаар responsive буюу олон төрлийн төхөөрөмжинд нийцтэй болон зургийг автоматаар render хийж ачаалал багатй болгохын тулд суулгасан next/image component-ийг ашиглана уу.

import Image from 'next/image';

const MyImage = () => ( <Image src="/me.png" alt="Picture of the author" width={500} height={500} /> );

Энэ тухай дараагийн нийтлэлд илүү дэлгэрэнгүй оруулах болно

6. React.memo болон useMemo-г ашигла

Optimization: төлөв нь өөрчлөгддөг functional component-ийн React.memo ашиглан төлөв нь өөрчлөгдөөгүй өмнөх төлөвийн утгатай ижил утгатай байгаа тохиолдолд component дахин re-render хийхээс сэргийлэх боломжтой.

Memoization: functional component дахь өөр нэгэн төлөв өөрчлөгдөх үед дахин ачааллах шаардлагагүй тооцоолол, нөөц идсэн хувьсагч, өгөгдлийг өмнөх төлөвөөр нь хадгалах useMemo hook ашиглаж dependency injection хэрэгжүүлж болох юм.

import React, { memo, useMemo } from 'react';

const HeavyComponent = memo(({ data }) => { return <div>{data}</div>; });

const ParentComponent = ({ data }) => { const memoizedData = useMemo(() => computeHeavyData(data), [data]);

return <HeavyComponent data={memoizedData} />; };

7. Non-critical буюу priority багатай JavaScript script кодуудыг түр хойшлуулах

Ачаалах хугацааг хойшлуулах: Javascript thread ачааллах үед чухал биш JavaScript кодуудын таг дээр non-critical-script нэмж системийн ачааллах хурдыг дээшлүүлж болно.

<script src="non-critical-script.js" defer></script>

8. Web Workers

Javascript-ийн Web Worker технологийг ашиглан ачаалал ихтэй тооцоолол шаардсан үйлдэл, script үүдийг core thread ийг ачааллыг чөлөөлж background thread рүү шилжүүлэх боломжтой.

const worker = new Worker(new URL('./worker.js', import.meta.url));

worker.onmessage = (event) => { console.log('Received message from worker:', event.data); };

worker.postMessage('Hello, worker!');

9. Server-Side Rendering оновчтой болгох

Static Generation (SSG): Мэдээлэл нь байнга өөрлчөгдөх шаардлагагүй хуудсуудыг getStaticProps ашиглан хуудсуудыг статик хуудас болгож ачааллыг илт багасгах боломжтой.

export async function getStaticProps() { const data = await fetchData(); return { props: { data }, }; }

Server-Side Rendering (SSR): Хүсэлт бүр дээр Интерактив үйлдэлтэй, хариу үйлдэл үзүүлэх шаардлагатай хуудсанд getServerSideProps-ийг ашиглан сервер талын render ашиглан ачааллыг багасгах боломжтой юм.

Эдгээр стратегийг хэрэгжүүлснээр та Next.js аппликейшн даа JavaScript-н гүйцэтгэлийн хугацааг багасгаж, гүйцэтгэлийг сайжруулж, хэрэглэгчийн туршлага, хэрэглээг сайжруулах боломжтой. Үүнээс гадна та өөрийн төслийг амжилттай болгохын тулд Lighthouse, Web Vitals зэрэг хэрэгслүүдийг ашиглан өөрчлөлтийн үр нөлөөг үргэлж дүн шинжилгээ хийж хэмжиж хэвших нь маш үр дүнтэй арга байх болно.