큰 타사 라이브러리를 추가했기 때문에 앱이 매우 느리게 로드되는 것을 본 적이 있습니까? 이러한 종류의 경우에 대한 깔끔한 솔루션은 지연 로드를 사용하는 것입니다. 즉, 큰 덩어리의 코드 다운로드를 지연시킵니다. 이 접근 방식을 사용하면 응용 프로그램의 일부가 이미 작동하고 나머지는 로드됩니다.

비 지연 로드

응용 프로그램을 시작하기 전에 큰 pdf를 로드하는 응용 프로그램의 예:

import { PDFDocument } from "pdf-lib"; // synchronous import

// ...

pdfButton.addEventListener("click", async () => { 
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([350, 400]);
  page.moveTo(110, 200);
  page.drawText("Hello World!");
  const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
  document.getElementById("pdf").src = pdfDataUri;
});

웹팩의 지연 로드

import(/* webpackChunkName: "pdf-lib" */ "pdf-lib").then(({ PDFDocument }) => {
  // ..

  pdfButton.addEventListener("click", async () => {
    const pdfDoc = await PDFDocument.create();
    const page = pdfDoc.addPage([350, 400]);
    page.moveTo(110, 200);
    page.drawText("Hello World!");
    const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
    document.getElementById("pdf").src = pdfDataUri;
  });
});

import()는 javascript에서 동적 가져오기입니다. Webpack은 동적으로 생성하는 새 자산으로 변환합니다"pdf-lib". /* webpackChunkName: "pdf-lib" */ 새 자산의 이름을 지정할 수 있습니다. 내가 이 줄을 제거할 때 지연 로드된 청크가 55.js라고 불렸습니다. 누군가가 주변 문제를 해결해야 한다면 가장 좋은 이름은 아닙니다.

더 관심이 있으세요?

webpack video course

이 예제로 플레이한 저장소 - https://github.com/marcin-wosinek/webpack-pdf-example

예제를 통해 진행하는 비디오: