Skip to content
This repository has been archived by the owner on Sep 12, 2020. It is now read-only.

Simulating different approaches for code-splitting lodash.

Notifications You must be signed in to change notification settings

mhxbe/lodash-webpack-bundle-size

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

lodash-webpack-bundle-size

Simulating different approaches for code-splitting lodash.

In index.js, both lodash & lodash-es dependencies are used for simulating code-splitting with different webpack configurations.

webpack configurations

Four webpack configurations are used to see which config approach yields the best results. Each configuration is also accompanied by a webpack-bundle-analyzer-report which can be found in the dist-folder.

These are the 4 configurations:

  • non optimized
  • lodash babel plugin
  • lodash webpack plugin
  • combination of babel and webpack plugins

1. Non optimized

Only entry & output properties are used in non-optimized config.

2. Babel plugin

Only babel-plugin-lodash is used in this config with babel plugin.

3. webpack plugin

Only lodash-webpack-plugin is used in this config with webpack plugin.

4. Combination of Babel & webpack plugins

A combination of babel-plugin-lodash and lodash-webpack-plugin is used in this config with babel and webpack plugins.

Results

Config File Size
babel and webpack plugin dist/babel-webpack.js 1.96 KB
babel plugin dist/babel.js 21.90 KB
webpack plugin dist/webpack.js 71.50 KB
non optimized dist/non-optimized.js 79.60 KB

Warning

The configuration where both babel and webpack plugins are used, result in a staggering small bundle size. The reason why is because a lot of behind-the-scene features of lodash are removed by the lodash-webpack-plugin, which explains the big savings.

For example, lodash's get will not behave as expected if lodash-webpack-plugin is used.

Here's a full list of features that are disabled by lodash-webpack-plugin: github.com/lodash/lodash-webpack-plugin#feature-sets.

You can choose to opt-in to certain features like this:

new LodashModuleReplacementPlugin({
  collections: true,
  paths: true
});

About

Simulating different approaches for code-splitting lodash.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published