How To Reduce Your Bundle Size By Automatically Getting Your Dependencies From A CDN

https://unsplash.com/photos/uL65jGuBfsE

If your building a React application you no doubt you have some dependencies in your project, React, react-router, redux, lodash … just to name a few.

All these dependencies have an impact on our application size. One common way to deal with this is to split our bundle into vendor.js and bundle.js. vendor.js holding our common modules.

Another way is to get these npm modules from a CDN…

Introducing unpkg.

unpkg

I recently come across unpkg which is an awesome project created my Michael Jackson and for those that don’t already know unpkg is, its a fast, global content delivery network for everything on npm.

Unpkg allows any npm package to be included in our index.html without the need to bundle or compile the code.

Take React on unpkg for example. We can embed this directly in our page using a script tag and start using React without the need of webpack or any compiler.

Pretty cool right?

But you might be wondering how does this help reduce my bundle size?

Luckily for us Thomas Sileghem has created a great plugin for webpack called dyanmic-cdn-webpack-plugin which will get your dependencies from a CDN rather than building them inside your application.

Lets take a look on how to get started.

Getting started with a quick example

I have created a quick application using create-react-app and I have also added a couple of common modules, react-router-dom, redux and react-redux.

When we build the application out the box our index.html looks like this:

Nothing special going on. Our bundle.js file is included at the bottom.

Now lets introduce the dyanmic-cdn-webpack-plugin.

Setting up dyanmic-cdn-webpack-plugin

Checkout the README over at https://github.com/mastilver/dynamic-cdn-webpack-plugin. Or just follow the instructions below…

Install the module.

$ npm install --save dynamic-cdn-webpack-plugin module-to-cdn

Setup DynamicCdnWebpackPlugin inside your webpack.config.

webpack.config.js with DyanmicCdnWebpackPlugin

Ok were done. Now lets build our application again.

Notice the difference?

As you can see our npm packages have now been included as script tags (from unpkg.com) in our index.html file. Also these modules are no longer bundled in our application reducing the size from 50.43kb to 5.55kb.

File size before DyanmicCdnWebpackPlugin

File size after installing DyanmicCdnWebpackPlugin

Thats it.

We are now getting our modules from unpkg.com (which is supported by CloudFlare).

From Oct 21 to Nov 20 unpkg served 5,217,658,772 requests and a total of 52.16 TB of data to 410,620,099 unique visitors, 82% of which were served from the cache.

We have reduced our bundle size dramatically from 50.43kb to 5.55kb.

And it only took about 2 minutes to setup.

Want to know more?

If you want to know more I highly recommend watching Michael Jackson giving his talk on unpkg.

Let me know if this has helped, huge thanks to the people involved that make it happen. Looks like an awesome tool that I will be keeping my eyes on.