The only module bundler that guarantees success with speed!

How I chanced upon module bundlers

Once upon a time, my former team member, Albert, had to take up a short assignment of Joe, a front-end developer, who was about to leave their organization.

Now, Joe had left everything perfectly in place, every tool and every configuration… Well, at least that’s what he and Albert believed!

However, a couple months later, Albert started having issues with the build during CI (Continuous Integration). Well, it was actually a dependency management issue. Therefore, to fix this issue, he tried to figure out various solutions.

We all pooled in and helped him resolve that issue. That’s how, along with Albert, we all finally ended up experimenting with multiple module bundlers!

This blog post is an attempt to capture that learning for posterity’s sake!


What does a module bundler do?

Most programming languages allow code to be split into multiple files. Then, those files are imported into the application to use their specific functionalities.

Usually, browsers don’t support this functionality (though few modern ones have started bringing in this functionality). Module bundlers were built to bring in this capability.

Module bundlers:

  • Load modules asynchronously and run them after they’ve finished loading, or
  • Combine all the necessary files into a single JavaScript file, which could be loaded via a <script> tag in HTML


Disadvantages of not using module loaders and bundlers

You can always combine your files manually or load HTML with countless <script> tags but that has several disadvantages, such as:

  • You’ll have to keep track of the dependencies and the loading order of the files.
  • Multiple <script> tags mean multiple calls to the server to load all of your code, which  makes the performance worse.
  • You’ll have to worry about a lot of manual work, such as keeping track of bundled scripts, maintaining them, etc.


webpack: The only module bundler that guarantees success with speed!

webpack is one of the most popularly used module bundlers available for the JavaScript ecosystem. And according to me, one of the best out there! I’ll come to that in a bit! 🙂

Module bundlers became a trend starting with RequireJS, which was introduced first in 2009 as a JavaScript module bundler, followed by  browserify!

Since then, quite a number of module bundlers have emerged. Among all the module bundlers, webpack is one of the best.

Image source: https://webpack.js.org/

When webpack processes your application:

1. It recursively builds a dependency graph that includes every module your application needs.
2. Then, packages all of those modules into a small number of bundles-often only one-to be loaded by the browser.


When should you use webpack?

You should use webpack if you’re building a complex front-end application with many non-code static assets.

It might be more of an overhead for fairly small applications with less static assets.


What does webpack do?

Based on the code size, webpack helps to modularize the code. It loads these modules as and when needed. It helps in faster page load and improves performance.

webpack can transform files from a different language, such as, CoffeeScript to JavaScript, or inline images to data URLs.

It also helps to parse most of the third-party library and handles widely used styles in CommonJS and AMD.

 

webpack: A comparison with  other module bundlers

Well, as you’ll already know, webpack isn’t the only module bundler out there! So, I thought that this feature-by-feature comparison will help you choose the best module bundler!

webpack is one of the most flexible module bundlers because there are loaders pretty much for anything — so you can shim or include any type of file you want. It’s more flexible than other bundlers because you can decide more entry points and support different types of assets.


Sample configuration with webpack

Given below are the steps to configure webpack for a small application.

Here, you just bundle the script files, transpile them into ES5 code. We also bundle the css files in the project. The steps to install and configure webpack are given below:

1. First of all, you’ll need to install Node.js and npm. Then, install webpack and webpack-dev-server either globally or locally on your machine:

npm install webpack
npm install webpack-dev-server

2. Install the webpack-cli (The tool used to run webpack on the command line):

npm install webpack-cli --save-dev

3. webpack.config.js tells what the webpack should do. Create a file webpack.config.js in your project and add the following basic snippet to it:

module.exports = {

  entry: './main.js',

  output: {

    filename: './bundle.js'

  }

};

The configuration is pretty simple. Entry is the file, which’ll be the root of your dependency graph and the entry file for webpack whereas the output contains the filename of the output file. The output file will be used in index.html.

4. Open terminal from project root and execute the following commands:

npm init -y

The npm init -y creates package.json in your project, which you must use to save development dependencies and to add loaders to your project.

package.json
  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "main": "index.js",
    "scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server"
       "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }
npm install --save-dev babel-loader babel-core babel-preset-env 
npm install --save-dev css-loader style-loader

npm install –save-dev babel-loader css-loader style-loader installs these loaders via npm and saves them in the node_modules folder inside your project.

5. Now, to work with the installed loaders, you must inform your webpack.config.js to use them while creating the builds or while running the web server. You should do it by modifying your config file as follows:

module.exports = {
  entry: './main.js',
  output: {
    filename: './bundle.js'
  },
  watch: true,
  module: {
    rules: [
    {
      test: /\.css$/,
      use: [
        { loader: "style-loader" },
        { loader: "css-loader" }
      ]

    },{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: { 
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      } 
    }]
};


Closing Notes

I recommend using webpack for bundling large web applications. webpack is also my first choice for single-page web applications.

In fact, for our Brimma Tech website, we used webpack and reduced its load time by two-third of what it was before! Also, we’ve reduced the number of gulp tasks in our builds and decreased the complexity.

The following graph shows our website’s load time before and after using webpack for bundling!

Overall, webpack is the clear winner when it comes to speed and flexibility. webpack 2 offers more features and performance outside of the box though as of now, it’s in beta stage and not ready for production as some of the sourcemapping for scss is broken and not all loaders support it.

With webpack, you can support all of what other module bundlers support with external loaders.

So, what do you think? Do you agree with me? I look forward to your thoughts on my webpack comparison with other module bundlers.


Disclaimer

Please note that the views, thoughts, and opinions expressed in this blog post belong solely to the author, and not necessarily to the author’s employer, organization, committee or other group or individual.

References

3 Replies to “The only module bundler that guarantees success with speed!”

Leave a Reply

Your email address will not be published. Required fields are marked *