5 -アプリケーションで怠惰なロードライブラリ

あなたはあなたのアプリの負荷は非常に遅いので、ちょうど、サードパーティ製のライブラリを追加を見たことがありますか?この種のケースのためのきちんとした解決法は、怠慢なロードを使用することです--コードの大きい塊のダウンロードを遅らせて.残りの部分が読み込まれている間、このアプローチは、すでに動作しているアプリケーションの一部を持つことができます.

非怠惰荷重
アプリケーションを起動する前に、大きな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;
});

Webpackにおける遅延負荷

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

動画を見るには