Webpack Academy #4: Optimise your bundle size with CDN

#webpack #javascript #webdev

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!

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

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

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

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!

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 !

<% 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

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 👇

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

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 and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

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

And you can mark 🔖 this article!