Keep your Javascript dependencies under control

With all the Javascript libraries and their dependencies these days it’s easy to get carried away and lost track of how heavy your frontend is.

Here is a great tool for Webpack backed applications: Webpack Bundle Analyzer. It shows the exact size (parsed and gzipped included) of each dependency you put inside your package.json file.

And here is an example of how to add it to your Rails project.

First, we need to add it to the package.json:

# Save the package to your `devDependencies`
yarn add -D webpack-bundle-analyzer

Second, add this to your config/webpack/environment.js file, right before module.exports = environment; line:

if (process.env.ANALYZE_BUNDLE) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  environment.plugins.append('BundleAnalyzer', new BundleAnalyzerPlugin());
}

Third, make it available as yarn/npm run task:

// package.json
{
  // ...
  "scripts": {
    // ...
    "analyze": "ANALYZE_BUNDLE=true RAILS_ENV=production ./bin/webpack"
  },
  // ...
}

Done. You can run it like this now:

yarn run analyze

Happy keeping your Javascript dependencies under control! :)

Comments

[JavaScript Joel]

+1 for recommending webpack-bundle-analyzer. This has become part of every build we have. It is critical for any front end app when size is a factor.