Webpack Academy #4: Optimise your bundle size with CDN
Tags: webpack, javascript, webdev
Published: 2021-08-26 18:59:16

Today is a big day for us! From the first academy we discover a lot of things about **Webpack** and today is the moment to **Optimisation!** 

### The issue with external libraries

Along with your project growth, you will need to import some libraries like **Lodash** for example, if you use the *classic import* in your project, it will take more bundle size in your output!

Let's take an example with adding **lodash** in our project!

```js
import { three } from './three'
import Lodash from 'lodash'

Lodash.cloneDeep({})
console.log(three)
```

When we build the project we have a bundle size from 5Kb to 500kB!

It's bad since if we add more libraries the bundle size will be too big! 

We can check the bundle block per block with a plugin called `webpack-bundle-analyzer`

We add it to the config

```js
new BundleAnalyzerPlugin({
   openAnalyzer: true,
   analyzerMode: 'server',
})
```

![Screenshot 2021-08-26 at 19.06.38](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4xadggdbnzms8w1xckl.png)
 
We can see that `Lodash` is taking 99% of the bundle size!

But how can we fix that? 🤔

### Use CDN for big library import 

We can import the `lodash` library as cdn!

The library will be load in the cache browser and not in the bundle!

How can we implement that?

We will just check that! ;D

First, create a js file that contains all cdn

```js
module.exports = {
    js: [
        "https://unpkg.com/lodash@4.17.15/lodash.min.js",
    ],
}
```
📝 *Note We will use `min` version (minimum size) for prod, it's not really readable in source code but we don't care about this in prod mode !*

Add it in the `HTML plugin` since it will be injected as cdn import in the HTML page!

```js
new HtmlWebpackPlugin({
   title: 'Webpack academy title',
   template: './src/index.html',
   inject: 'body',
   cdn,
   minify: {
      removeComments: true,
      collapseWhitespace: false
   }
}),
```

We need to edit the `HTML` template in order to inject the cdn import !

```html
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
   <script type="text/javascript" src="<%=js%>"></script>
<% } %>
```

But it's not finished! If we stop at this step, webpack will **NOT** use the cdn import ! For this, we will need to add a new property to the *webpack config* called `externals`

```js
externals: {
   lodash: '_',
},
```
📝 *Note: We need to use the export name from lodash that is `_`, so we need to rename the import from `Lodash` to `_`*

And finally, when we check our bundle analyzer we got this 👇

![Screenshot 2021-08-26 at 19.27.41](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llnn5p3i0j12kzxygcoi.png)
 
We have our initial bundle size !

So when you need to import some big libraries in your project, I recommend you to use **cdn** for this ! The user will keep the library in the browser cache ! So when it comes back to your web app, the library will be load very fast ! 🏃‍♂️💨

I hope you like this article, in the next article we will check together with the other part of optimisation!


[You can check the source code at this commit](https://github.com/Code-Oz/webpack-academy/tree/0ef2df67ef71bb5f4293d7820d58bed2f58e8a90)

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!