The Advantages of Migrating Teamweek To Webpack.
,
Product Updates

The Advantages of Migrating Teamweek To Webpack

If you have been working on a production Javascript application, chances are high that you have come across the term build tool. In case you haven’t this article serves as a good introduction. 

At Teamweek, we’ve recently switched from a Gulp based build pipeline to Webpack and would like to share the why of the process with the community.

The Problem

We wanted to give our users the ability to crop their profile pictures before uploading them. With CropperJS it is pretty straight forward to have such an interface. Our view avatar_upload.js looked something like this.

import _ from 'lodash';
import View from 'ampersand-view';
import CropperJS from 'cropperjs';
require('cropperjs/dist/cropper.css');
export default View.extend({
  /*
    ...
    view methods
    ...
  */
  
  setupCropping() {
    this.cropper = new CropperJS({
      /* cropper initialization options */
    });
  }  
});

There were 4 main reasons why we decided the above approach wasn’t going to work for us:

  1. Javascript + CSS combined the standalone version of the CropperJS is ~94KB (would hamper loading time of application).
  2. Users were very less likely to update their profile picture every time they used our application(makes compromising on loading time even worse).
  3. How to deal with such situations in the future? (we can’t keep on adding modules to our initial payload and still hope our application will load fast)
  4. What about similar modules in our code that already exist 👻 ? (definitely, an area where we could improve our application’s performance)

Enter Webpack

Webpack has a very powerful feature called Code Splitting which allows us to load modules on demand. Since at the time of migration Webpack2 hadn’t officially landed we used the require.ensure() approach of loading modules on demand.

This is how our avatar_upload.js view looked after adding code splitting.

import _ from 'lodash';
import View from 'ampersand-view';
let CropperJS;
export default View.extend({
  /*
    ...
    view methods
    ...
  */
  
  initialize() {
    require.ensure([], () => {
      require('cropperjs/dist/cropper.css');
      CropperJS = require('cropperjs');
      this.setupCropping();
    });
  },
  
  setupCropping() {
    this.cropper = new CropperJS({
      /* cropper initialization options */
    });
  }  
});

The avatar_upload view loads CropperJS(javascript+css) asynchronously as a separate module when a user clicks on edit photo 🎉🎉. This module is minified during the build process and gzipped before being served, due to which the actual size impact on the application is 12KB.

But you saved only 12KB😛

12KB of a payload does sound like an overkill for migrating your entire build tool. But for us, it’s the underlying ability of Webpack to split application code into separate chunks and load them on demand 💪 which makes the migration worthwhile.

For instance, right after we finished with adding the above feature, we separated out our live_sync module which internally imported the entire faye library from the main application bundle. Another 12KB saved! 🎉

What’s next?

  1. Reduce critical payload size of the application. This includes identifying modules which can be loaded on demand and putting them into separate chunks. In any modern day SPA routes, modals and popups are always a good place to start exploring code splitting opportunities.
  2. Migrate to Webpack2 and leverage Tree Shaking. We already have a working PR for Webpack2 migration but to utilize tree shaking we need to migrate our legacy Coffeescript code to ES6 modules 😅. This optimization might have to wait a bit in our case.

While migrating to shiny new tools in JS land might make you sound cool, everything comes with a time cost. As developers, we should have a clear understanding of why switching to a new tool/library is necessary and have a solid use case to demo.

Dhruv Parmar

It’s so much easier to plan & estimate with a small team when I can see everyone & all projects at once.

–– Darren | We Three

Create Your Visual Roadmap with Teamweek!

Be a Better Manager

Get fresh insights so you can manage your team, your time, and your projects #likeaboss
Join the list.
I want in!

Be a Better Manager

Get fresh insights so you can manage your team, your time, and your projects #likeaboss
I want in!
close-link