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

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

非怠惰荷重
アプリケーションを起動する前に、大きな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
  • 動画を見るには
    • 13-6. 第3グループ
    13-5. スレッド優先度