DEV Community

Cover image for Webpack Academy #4: Optimise your bundle size with CDN
CodeOz
CodeOz

Posted on • Updated on

Webpack Academy #4: Optimise your bundle size with CDN

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)
Enter fullscreen mode Exit fullscreen mode

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',
})
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-08-26 at 19.06.38

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",
    ],
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“ 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
   }
}),
Enter fullscreen mode Exit fullscreen mode

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>
<% } %>
Enter fullscreen mode Exit fullscreen mode

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: '_',
},
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“ 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

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!

Discussion (0)