# How to lazy load library in webpack 5

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:

```js
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
```js
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?

* my  [video course about webpack](https://bit.ly/WebpackCourse) 

* repository where I played with this example:
%[https://github.com/marcin-wosinek/webpack-pdf-example]
 
* video where I go through the example:
%[https://www.youtube.com/watch?v=jhBmOugUBg0]