• Stars
    star
    3,365
  • Rank 13,296 (Top 0.3 %)
  • Language
  • License
    Apache License 2.0
  • Created almost 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Using a library in your webpack project? Here’s how to optimize it

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.

More Repositories

1

squoosh

Make images smaller using best-in-class codecs, right in the browser.
TypeScript
21,605
star
2

comlink

Comlink makes WebWorkers enjoyable.
TypeScript
11,198
star
3

quicklink

⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time
JavaScript
11,024
star
4

ndb

ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
JavaScript
10,913
star
5

carlo

Web rendering surface for Node applications
JavaScript
9,313
star
6

ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
JavaScript
5,452
star
7

sw-precache

[Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.
JavaScript
5,236
star
8

react-adaptive-hooks

Deliver experiences best suited to a user's device and network constraints
JavaScript
5,097
star
9

ui-element-samples

A collection of prototyped UI elements
JavaScript
4,101
star
10

sw-toolbox

[Deprecated] A collection of service worker tools for offlining runtime requests
JavaScript
3,621
star
11

critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
JavaScript
3,330
star
12

psi

PageSpeed Insights Reporting for Node
JavaScript
3,100
star
13

bubblewrap

Bubblewrap is a Command Line Interface (CLI) that helps developers to create a Project for an Android application that launches an existing Progressive Web App (PWAs) using a Trusted Web Activity.
TypeScript
2,375
star
14

lighthousebot

Run Lighthouse in CI, as a web service, using Docker. Pass/Fail GH pull requests.
JavaScript
2,235
star
15

preload-webpack-plugin

Please use https://github.com/vuejs/preload-webpack-plugin instead.
JavaScript
2,162
star
16

worker-plugin

👩‍🏭 Adds native Web Worker bundling support to Webpack.
JavaScript
1,914
star
17

prerender-loader

📰 Painless universal pre-rendering for Webpack.
JavaScript
1,912
star
18

simplehttp2server

A simple HTTP/2 server for development
Go
1,735
star
19

jsvu

JavaScript (engine) Version Updater
JavaScript
1,698
star
20

size-plugin

Track compressed Webpack asset sizes over time.
JavaScript
1,672
star
21

clooney

Clooney is an actor library for the web. Use workers without thinking about workers.
JavaScript
1,419
star
22

browser-fs-access

File System Access API with legacy fallback in the browser
JavaScript
1,383
star
23

proxx

A game of proximity
TypeScript
1,315
star
24

dark-mode-toggle

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
JavaScript
1,174
star
25

application-shell

Service Worker Application Shell Architecture
JavaScript
1,169
star
26

pwacompat

PWACompat to bring Web App Manifest to older browsers
JavaScript
1,130
star
27

container-query-polyfill

A polyfill for CSS Container Queries
TypeScript
1,127
star
28

idlize

Helper classes and methods for implementing the idle-until-urgent pattern
JavaScript
1,061
star
29

houdini-samples

Demos for different Houdini APIs
JavaScript
974
star
30

jsbi

JSBI is a pure-JavaScript implementation of the official ECMAScript BigInt proposal.
JavaScript
908
star
31

css-triggers

A reference for the render impact of mutating CSS properties.
JavaScript
893
star
32

howto-components

Literate code examples for common UI patterns.
JavaScript
851
star
33

tooling.report

tooling.report a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.
JavaScript
848
star
34

page-lifecycle

PageLifecycle.js is a tiny JavaScript library that allows developers to easily observe Page Lifecycle API state changes cross browser
JavaScript
803
star
35

css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
JavaScript
709
star
36

web-audio-samples

Web Audio API samples by Chrome Web Audio Team
JavaScript
686
star
37

chrome-for-testing

JavaScript
667
star
38

picture-in-picture-chrome-extension

JavaScript
667
star
39

estimator.dev

🧮 Calculate the size and performance impact of switching to modern JavaScript syntax.
JavaScript
665
star
40

comlink-loader

Webpack loader to offload modules to Worker threads seamlessly using Comlink.
JavaScript
616
star
41

pwa-wp

WordPress feature plugin to bring Progressive Web Apps (PWA) to Core
PHP
615
star
42

ProgressiveWordPress

A Sample WordPress-based Progressive Web App
JavaScript
570
star
43

web-push-codelab

JavaScript
557
star
44

text-app

A text editor for ChromeOS and Chrome
JavaScript
552
star
45

gulliver

A PWA directory, focusing on collecting PWA best practices and examples.
JavaScript
549
star
46

wasm-feature-detect

A small library to detect which features of WebAssembly are supported.
JavaScript
546
star
47

progressive-tooling

A list of community-built, third-party tools that can be used to improve page performance
JavaScript
546
star
48

svgomg-twa

A sample that project Trusted Web Activities technology to wrap SVGOMG in an Android Application
Shell
519
star
49

web-vitals-report

Measure and report on your Web Vitals data in Google Analytics
JavaScript
503
star
50

text-editor

A text editor build on the Native File System APIs
JavaScript
501
star
51

pptraas.com

Puppeteer as a service
JavaScript
455
star
52

progressive-rendering-frameworks-samples

Samples and demos from the Progressive Rendering I/O talk
JavaScript
411
star
53

wasm-bindgen-rayon

An adapter for enabling Rayon-based concurrency on the Web with WebAssembly.
JavaScript
403
star
54

MiniMobileDeviceLab

A mini mobile web device lab
Objective-C
396
star
55

webm-wasm

webm-wasm lets you create webm videos in JavaScript via WebAssembly.
C++
394
star
56

link-to-text-fragment

Browser extension that allows for linking to arbitrary text fragments.
JavaScript
390
star
57

cronet-sample

A sample for the Cronet library
Java
390
star
58

buffer-backed-object

Buffer-backed objects in JavaScript.
JavaScript
372
star
59

pinch-zoom

TypeScript
370
star
60

webpack-training-project

A training project for learning Webpack optimizations
JavaScript
368
star
61

samesite-examples

Examples of using the SameSite cookie attribute in a variety of language, libraries, and frameworks.
HTML
366
star
62

airhorn

Air horn
JavaScript
361
star
63

AutoWebPerf

AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools including PageSpeedInsights, WebPageTest and more.
JavaScript
353
star
64

first-input-delay

A JavaScript library for measuring First Input Delay (FID) in the browser.
JavaScript
347
star
65

tti-polyfill

Time-to-interactive polyfill
JavaScript
333
star
66

react-shrine

"Shrine" Progressive Web App sample built with React
JavaScript
330
star
67

dynamic-import-polyfill

A fast, tiny polyfill for dynamic import() that works in all module-supporting browsers
JavaScript
320
star
68

wasi-fs-access

This is a demo shell powered by WebAssembly, WASI, Asyncify and File System Access API.
TypeScript
312
star
69

native-url

Node's url module implemented using the built-in URL API.
JavaScript
284
star
70

two-up

TypeScript
281
star
71

adaptive-loading

Demos for Adaptive Loading - differentially deliver fast, lighter experiences for users on slow networks & devices
JavaScript
264
star
72

so-pwa

A progressive web app to read Stack Overflow content.
JavaScript
255
star
73

import-from-worker

It’s like import(), but runs the module in a worker.
JavaScript
249
star
74

sample-pie-shop

Example e-commerce site to explore PWA (Progressive Web App) use cases.
JavaScript
237
star
75

file-drop

A simple file drag and drop custom-element
TypeScript
232
star
76

serial-terminal

Demo application for the Web Serial API.
TypeScript
226
star
77

form-troubleshooter

TypeScript
215
star
78

postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.
JavaScript
215
star
79

audioworklet-polyfill

🔊 Polyfill AudioWorklet using the legacy ScriptProcessor API.
JavaScript
190
star
80

http2-push-manifest

Generate a list of static resources for http2 push.
JavaScript
187
star
81

pointer-tracker

Track mouse/touch/pointer events for a given element.
TypeScript
184
star
82

pr-bot

🤖 Compare your base branch to a pull request and run plugins over it to view differences
JavaScript
179
star
83

discovery

Discoveries on Sustainable Loading research
177
star
84

imagecapture-polyfill

MediaStream ImageCapture polyfill. Take photos from the browser as easy as .takePhoto().then(processPhoto)
JavaScript
176
star
85

tasklets

JavaScript
176
star
86

telnet-client

TypeScript
166
star
87

extension-manifest-converter

Python
164
star
88

credential-management-sample

Credential Management Sample
HTML
157
star
89

wadb

A TypeScript implementation of the Android Debug Bridge(ADB) protocol over WebUSB
TypeScript
156
star
90

extension-update-testing-tool

Tool for testing the update flow for Chrome Extensions during development, including permission grants.
JavaScript
154
star
91

wasm-av1

Port of the AV1 Video codec to WebAssembly
C
154
star
92

houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.
JavaScript
152
star
93

pwa-workshop-codelab

JavaScript
152
star
94

perf-track

Tracking framework performance and usage at scale
Svelte
150
star
95

kv-storage-polyfill

A polyfill for the kv-storage built-in module.
JavaScript
146
star
96

http2push-gae

Drop-in HTTP2 push on App Engine
HTML
140
star
97

chromeos_smart_card_connector

Smart Card Connector App for Chrome OS
C++
135
star
98

snapshot

TypeScript
133
star
99

devwebfeed

Firehose of team++ resources
JavaScript
130
star
100

sample-currency-converter

A sample currency conversion Progressive Web App
JavaScript
129
star