Optimize your libraries with webpack
Using a library in your webpack project? Use these tips to make your bundle smaller!
Want to add a tip? See the contribution guide and make a pull request!
Contents:
async
async-es
babel-polyfill
core-js
date-fns
lodash
lodash-es
moment
react
reactstrap
react-bootstrap
react-router
styled-components
whatwg-fetch
- Solutions that work with multiple libraries
async
async
is a collection of utilities for working with async functions. npm package
Generally, you should use the async-es
package
Still, even if prefer to use async
, for the list of optimizations, see the async-es
section
async-es
async-es
is a collection of utilities for working with async functions. It’s the same package as async
babel-plugin-lodash
Remove unused methods with
✅ Safe to use by default / How to enable is ↓ / Added by @iamakulov
If you use async-es
as a single import, you’re bundling the whole library into the application – even if you only use a couple of its methods:
// You only use `async.map`, but the whole library gets bundled
import async from 'async-es';
async.map(['file1', 'file2', 'file3'], fs.stat, function(err, results) {
console.log(results);
});
Use babel-plugin-lodash
to pick only those async-es
methods you need:
// Before Babel is applied
import async from 'async-es';
async.map(['file1', 'file2', 'file3'], fs.stat, function(err, results) {
console.log(results);
});
↓
// After Babel is applied
import _map from 'async-es/map';
_map(['file1', 'file2', 'file3'], fs.stat, function(err, results) {
console.log(results);
});
Enable this plugin as follows:
// .babelrc
{
"plugins": [["lodash", { "id": ["async-es"] }]],
}
babel-polyfill
babel-polyfill
is a Babel’s package that loads core-js
and a custom regenerator runtime. Babel docs · npm package
For the list of optimizations, see the core-js
section
core-js
core-js
is a set of polyfills for ES5 and ES2015+. npm package
babel-preset-env
Remove unnecessary polyfills with
✅ Safe to use by default / How to enable / Added by @iamakulov
If you compile your code with Babel and babel-preset-env
, add the useBuiltIns: true
option. This option configures Babel to only include polyfills that are necessary for target browsers. I.e., if you target your app to support Internet Explorer 11:
// .babelrc
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}
]
]
}
enabling useBuiltIns: true
will remove polyfills for all features that Internet Explorer 11 already supports (such as Object.create
, Object.keys
and so on).
Ship non-transpiled code to modern browsers
✅ Safe to use by default / How to enable / Added by @iamakulov
All browsers that support <script type="module">
also support modern JS features like async
/await
, arrow functions and classes. Use this feature to build two versions of the bundle and make modern browsers load only the modern code. For the guide, see the Philip Walton’s article.
date-fns
date-fns is a date utility library. npm package
babel-plugin-date-fns
Enable
✅ Safe to use by default / How to enable / Added by @chentsulin
babel-plugin-date-fns
replaces full imports of date-fns with imports of specific date-fns functions:
import { format } from 'date-fns';
format(new Date(2014, 1, 11), 'MM/DD/YYYY');
↓
import _format from 'date-fns/format';
_format(new Date(2014, 1, 11), 'MM/DD/YYYY');
lodash
Lodash is an utility library. npm package
babel-plugin-lodash
Enable
✅ Safe to use by default / How to enable / Added by @iamakulov
babel-plugin-lodash
replaces full imports of Lodash with imports of specific Lodash functions:
import _ from 'lodash';
_.map([1, 2, 3], i => i + 1);
↓
import _map from 'lodash/map';
_map([1, 2, 3], i => i + 1);
Note: the plugin doesn’t work with chain sequences – i.e. code like
_([1, 2, 3]).map(i => i + 1).value();
won’t be optimized.
lodash-es
to lodash
Alias
✅ Safe to use by default / How to enable is ↓ / Added by @7rulnik
Some of your dependencies might use the lodash-es
package instead of lodash
. If that’s the case, Lodash will be bundled twice.
To avoid this, alias the lodash-es
package to lodash
:
// webpack.config.js
module.exports = {
resolve: {
alias: {
'lodash-es': 'lodash',
},
},
};
lodash-webpack-plugin
Enable
⚠ Use with caution / How to enable / Added by @iamakulov
lodash-webpack-plugin
strips parts of Lodash functionality that you don’t need. For example, if you use _.get()
but don’t need deep path support, this plugin can remove it. Add it to your webpack config to make the bundle smaller.
Use the plugin with caution. The default settings remove a lot of features, and your app might use some of them.
lodash-es
lodash-es
is Lodash with ES imports and exports. npm package
For the list of optimizations, see the lodash
section
moment
Moment.js is a library for working with dates. npm package
moment-locales-webpack-plugin
Remove unused locales with
⚠ Use with caution / How to enable / Added by @iamakulov
By default, Moment.js ships with 160+ minified KBs of localization files. If you app is only available in a few languages, you won’t need all these files. Use moment-locales-webpack-plugin
to remove the unused ones.
Use the plugin with caution. The default settings remove all locales; this might break your app if you use some of them.
react
React is a library for building user interfaces. npm package
propTypes
declarations in production
Remove
✅ Safe to use by default / How to enable / Added by @iamakulov
React doesn’t perform propTypes
checks in production, but the propTypes
declarations still occupy a part of the bundle. Use babel-plugin-transform-react-remove-prop-types
to remove them from during building.
Replace with Preact
⚠ Use with caution / How to migrate / Added by @iamakulov
Preact is a smaller React alternative with a similar API. Switching to it saves you 250 minified KBs (tested with [email protected]
+ [email protected]
vs. [email protected]
+ [email protected]
).
Migrate to Preact with caution. Preact is not 100% compatible with React – i.e. it doesn’t support synthetic events and some React 16 features. However, many projects still can be migrated without any codebase changes. See the migration guide.
reactstrap
Reactstrap is a Bootstrap 4 library for React. npm package
babel-plugin-transform-imports
Remove unused modules with
✅ Safe to use by default / How to enable is ↓ / Added by @kurtextrem
When you import a module from Reactstrap:
import { Alert } from 'reactstrap';
other Reactstrap modules also get bundled into the app and make it larger.
Use babel-plugin-transform-imports
to strip unused modules:
// .babelrc
{
"plugins": [
["transform-imports", {
"reactstrap": {
"transform": "reactstrap/lib/${member}",
"preventFullImport": true
}
}]
]
}
To see how it works, check the babel-plugin-transform-imports
section
react-bootstrap
react-bootstrap
is a Bootstrap 3 library for React. npm package
babel-plugin-transform-imports
Remove unused modules with
✅ Safe to use by default / How to enable is ↓ / Added by @kurtextrem
When you import a module from react-bootstrap
:
import { Alert } from 'react-bootstrap';
other react-bootstrap
modules also get bundled into the app and make it larger.
Use babel-plugin-transform-imports
to strip unused modules:
// .babelrc
{
"plugins": [
["transform-imports", {
"react-bootstrap": {
"transform": "react-bootstrap/es/${member}",
"preventFullImport": true
}
}]
]
}
To see how it works, check the babel-plugin-transform-imports
section
react-router
React Router is a popular router solution for React. npm package
babel-plugin-transform-imports
Remove unused modules with
✅ Safe to use by default / How to enable is ↓ / Added by @kurtextrem
When you import a module from React Router:
import { withRouter } from 'react-router';
other React Router modules also get bundled into the app and make it larger.
Use babel-plugin-transform-imports
to strip unused modules:
// .babelrc
{
"plugins": [
["transform-imports", {
"react-router": {
"transform": "react-router/${member}",
"preventFullImport": true
}
}]
]
}
(This was tested with React Router v4.)
To see how it works, check the babel-plugin-transform-imports
section
styled-components
styled-components
is a CSS-in-JS library. npm package
babel-plugin-styled-components
Minify the code with
✅ Safe to use by default / How to enable / Added by @iamakulov
There’s babel-plugin-styled-components
that minifies the CSS code you write with styled-components
. See the minification docs.
whatwg-fetch
whatwg-fetch
is a complete window.fetch()
polyfill. npm package
unfetch
Replace with
⚠ Use with caution / How to migrate is ↓ / Added by @iamakulov
unfetch
is a 500 bytes polyfill for window.fetch()
. Unlike whatwg-fetch
, it doesn’t support the full window.fetch()
API, but instead focuses on polyfilling the most used parts.
Migrate to unfetch
with caution. While it supports the most popular API parts, your app might break if it relies on something less common.
Solutions that work with multiple libraries
Of course, there are also optimization tips for other libaries too. You can use them with common sense to get smaller or more performant bundles.
babel-plugin-transform-imports
✅ Safe to use by default / How to enable / Added by @kurtextrem / More Insight about this on Twitter
This handy babel plugin will transform your imports to only import specific components, which ensures not the whole library gets included (if tree-shaking is ineffective for the specific library).
// Before
import { Grid, Row, Col } from 'react-bootstrap';
// After
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
License
Copyright 2018 Google Inc. All Rights Reserved. Licensed under the Apache License, Version 2.0.