Have you ever seen your app load very slow, just because you added a big, 3rd party library? A neat solution for that kind of case, it's to use lazy load - delaying a download of big chunks of code. This approach allows having some part of the application already working, while the rest is being loaded.
non lazy-load
example of application loading a big, pdf before starting the application:
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;
});
lazy load in 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()
is a dynamic import from javascript. Webpack translates "pdf-lib"
to a new asset it creates dynamically. /* webpackChunkName: "pdf-lib" */
allow us to name the new asset. When I was removing this line, my lazy-loaded chunk was called 55.js
- not the best name if ever somebody would have to troubleshoot some issues around it.
Interested in more?
- webpack video course
- repository where I played with this example - https://github.com/marcin-wosinek/webpack-pdf-example
- video where I go through the example:
Top comments (0)