Minimizing Webpack bundle size

• webpack-bundle-analyzer

  24 12,560 4.5 JavaScript

  Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

  

  Let’s start by getting an understanding of all the code & dependencies that need to be sent to the browser, along with the memory size of each. Adding webpack-bundle-analyzer to your webpack configuration is the perfect starting point.

• InfluxDB

  www.influxdata.com featured

  Purpose built for real-time analytics at any scale. InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.

  

• babel-plugin-import

  2 3,157 3.0 JavaScript

  Modularly import plugin for babel.

  

  The babel-plugin-import plugin for babel-loader enables Webpack to only include the code we need when traversing through dependencies during compilation, instead of including the entire module. This is especially useful for heavy packages like antd and lodash. More often than not, web apps only need select UI components and helper functions, so let’s just import what’s needed.

• babel-plugin-lodash

  3 1,957 0.0 JavaScript

  Discontinued Modular Lodash builds without the hassle.

  

  Similar to babel-plugin-import, the babel-plugin-lodash plugin cherry picks the code we need to import from lodash. The parsed size of the entire lodash package is ~600KB, so we definitely don’t want everything.

• moment-timezone-data-webpack-plugin

  1 92 4.3 JavaScript

  Reduce moment-timezone data size for a webpack build

  If you’re using moment-timezone in your app, you’ll find moment-timezone-data-webpack-plugin extremely useful. Moment-timezone includes a comprehensive json file of all timezones for a wide date range, which results in a package size of ~208KB. As with locales, it’s highly likely we don’t need this large data set, so let’s get rid of it. This plugin helps us do that by customizing the data we want to include and stripping out the rest.

• terser-webpack-plugin

  6 1,941 6.1 JavaScript

  Terser Plugin

  

  Make sure Webpack is in production mode on release! Webpack applies a number of optimizations to your bundle, including minification with TerserWebpackPlugin if you’re using Webpack v4 or above. If not, you’ll have to install and add it manually. Other optimizations include omitting development-only code and using optimized assets.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

Suggest a related project