All Projects → GoogleChromeLabs → Webpack Libs Optimizations

GoogleChromeLabs / Webpack Libs Optimizations

Licence: apache-2.0
Using a library in your webpack project? Here’s how to optimize it

Projects that are alternatives of or similar to Webpack Libs Optimizations

Awesome Bundle Size
📝 An awesome list of tools and techniques to make your web bundle size smaller and your web apps load faster.
Stars: ✭ 118 (-96.3%)
Mutual labels:  webpack, performance
Webpack Unused
Check your frontend code for files/assets that are no longer used.
Stars: ✭ 137 (-95.7%)
Mutual labels:  webpack, frontend
Webpack Starter
✨ A lightweight foundation for your next webpack based frontend project.
Stars: ✭ 1,745 (-45.25%)
Mutual labels:  webpack, frontend
Fast Uglifyjs Plugin
hight performance uglify plugin for webpack
Stars: ✭ 72 (-97.74%)
Mutual labels:  webpack, performance
Webpack Book
From apprentice to master (CC BY-NC-ND)
Stars: ✭ 2,372 (-25.57%)
Mutual labels:  webpack, frontend
Jetpack
🚀 Jetpack – Webpack made more convenient.
Stars: ✭ 1,326 (-58.39%)
Mutual labels:  webpack, frontend
Spring Boot Vuejs
Example project showing how to build a Spring Boot App providing a GUI with Vue.js
Stars: ✭ 1,818 (-42.96%)
Mutual labels:  webpack, frontend
Happypack
Happiness in the form of faster webpack build times.
Stars: ✭ 4,232 (+32.79%)
Mutual labels:  webpack, performance
Bundle Buddy Webpack Plugin
🐐🐐🐐🐐 bundle-buddy-webpack-plugin 🐐🐐🐐🐐
Stars: ✭ 199 (-93.76%)
Mutual labels:  webpack, performance
Baumeister
👷 The aim of this project is to help you to build your things. From Bootstrap themes over static websites to single page applications.
Stars: ✭ 171 (-94.63%)
Mutual labels:  webpack, frontend
Import Cost
displays the import size of the package you are importing inside the code editor
Stars: ✭ 1,021 (-67.96%)
Mutual labels:  webpack, performance
Frontend Boilerplates
Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.
Stars: ✭ 269 (-91.56%)
Mutual labels:  webpack, frontend
Bundlephobia
🏋️ Find out the cost of adding a new frontend dependency to your project
Stars: ✭ 6,640 (+108.35%)
Mutual labels:  webpack, performance
Ostap
CLI tool that fast checks if your bundle contains multiple versions of the same package, only by looking in package.json.
Stars: ✭ 117 (-96.33%)
Mutual labels:  webpack, frontend
Webpacker
Use Webpack to manage app-like JavaScript modules in Rails
Stars: ✭ 5,282 (+65.74%)
Mutual labels:  webpack, frontend
Fe Interview
😃 每日一道经典前端面试题,一起共同成长。
Stars: ✭ 134 (-95.8%)
Mutual labels:  webpack, frontend
Create React App Typescript
DEPRECATED: Create React apps using typescript with no build configuration.
Stars: ✭ 3,759 (+17.95%)
Mutual labels:  webpack, frontend
Annotated Webpack Config
This is the companion github repo for the "An Annotated webpack 4 Config for Frontend Web Development" article.
Stars: ✭ 425 (-86.66%)
Mutual labels:  webpack, frontend
Webpack.js.org
Repository for webpack documentation and more!
Stars: ✭ 2,049 (-35.71%)
Mutual labels:  webpack, performance
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (-92.97%)
Mutual labels:  webpack, frontend

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 is a collection of utilities for working with async functions. npm package

Generally, you should use the async-es package instead. It ships with ES modules and is more optimized for bundling with webpack.

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 , but it’s more optimized for bundling with webpack. npm package

Remove unused methods with babel-plugin-lodash

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

Remove unnecessary polyfills with babel-preset-env

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

Enable babel-plugin-date-fns

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');

handlebars

Handlebars is a templating library. npm package

Switch to build-time compiling

Use with caution / How to enable is ↓ / Added by @danburzo

If you use Handlebars.compile() to compile templates in your app, switch to handlebars-loader. This way, you’ll compile templates during a webpack build – and won’t need to bundle the template-parsing part of the library.

Here’s how to avoid bundling the template-parsing part of Handlebars:

  • Switch to handlebars-loader, if you haven’t yet
  • And either:
    • replace all import Handlebars from 'handlebars' with import Handlebars from 'handlebars/runtime'

    • or alias the module using resolve.alias:

      // webpack.config.js
      {
        // ...
        resolve: {
          alias: {
            // Tip: `$` in the end of `handlebars$` means “exact match”: https://webpack.js.org/configuration/resolve/#resolvealias
            // This’d disable aliasing – and prevent breaking the code – for imports like `handlebars/something.js`
            handlebars$: path.resolve(__dirname, 'node_modules/handlebars/runtime.js')
          }
        }
        // ...
      }

Use this optimization with caution. Make sure your code does not use Handlebars.compile() anywhere, or your app will break.

lodash

Lodash is an utility library. npm package

Enable babel-plugin-lodash

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.

Alias lodash-es to lodash

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',
    },
  },
};

Enable lodash-webpack-plugin

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

Remove unused locales with moment-locales-webpack-plugin

Use with caution / How to enable / Added by @iamakulov

By default, Moment.js ships with 160+ minified KBs of localization files. If your 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.

moment-timezone

Moment Timezone is a plugin for Moment.js with full support for time zone calculations. npm package

Remove unused data with moment-timezone-data-webpack-plugin

Use with caution / How to enable / Added by @iamnotyourbroom

By default, Moment Timezone includes as much time zone data as possible via a 900+ KB JSON file. In some cases this data includes dates in the 19th century. If your app can work with a smaller range of dates, or only needs specific time zones, most of that data is redundant. Use moment-timezone-data-webpack-plugin to remove the unused data.

Use the plugin with caution. Removing too much time zone data can cause subtle date calculation bugs. Make sure your app still has all the data it needs to function correctly.

ractive

Ractive is a UI templating library. npm package

Switch to build-time compiling

Use with caution / How to enable is ↓ / Added by @danburzo

If you’re compiling your Ractive templates on the go (e.g., by passing strings to Ractive({ template }), switch to ractive-loader. This way, you’ll compile templates during a webpack build – and won’t need to bundle the template-parsing part of the library.

Here’s how to avoid bundling the template-parsing part of Ractive:

  • Switch to ractive-loader, if you haven’t yet

  • And alias the ractive module to the Ractive runtime using resolve.alias:

    // webpack.config.js
    {
      // ...
      resolve: {
        alias: {
          // Tip: `$` in the end of `ractive$` means “exact match”: https://webpack.js.org/configuration/resolve/#resolvealias
          // This’d disable aliasing – and prevent breaking the code – for imports like `ractive/something.js`
          ractive$: path.resolve(__dirname, 'node_modules/ractive/runtime.min.js')
        }
      }
      // ...
    }

Use this optimization with caution. Make sure your code does not compile any templates on the fly, or your app will break. Compiling templates on the fly happens whenever you pass a string to Ractive({ template: ... }) or Ractive.parse().

react

React is a library for building user interfaces. npm package

Remove propTypes declarations in production

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.

Migrate to an alternative React-like Library

Use with caution / Added by @iamakulov & @kurtextrem

There are alternatives to React with a similar API that have a smaller size or a higher performance, but lack some features (e.g., fragments, portals, or synthetic events).

Migrate to alternatives with caution. Some of the alternatives don’t have synthetic events or are lacking some React 16 features (Preact issue, Inferno issue, Nerv issue). However, many projects still can be migrated without any codebase changes. See the migration guides: Preact, Inferno, Nerv.

reactstrap

Reactstrap is a Bootstrap 4 library for React. npm package

Remove unused modules with babel-plugin-transform-imports

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

Remove unused modules with babel-plugin-transform-imports

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

Remove unused modules with babel-plugin-transform-imports

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

Minify the code with babel-plugin-styled-components

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

Replace with unfetch

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 libraries 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].