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
Fastpack
Pack JS code into a single bundle fast & easy.
Why?
Because JavaScript builds should be faster!
Here is an example benchmark of bundling ~1600 modules together.
Fastpack
webpack-proxy
Install
yarn add webpack-proxy
Usage
Let's say you want to use buble-loader, you can just add it to your webpack config without installing buble-loader and buble, since we
Webpack Deadcode Plugin
Webpack plugin to detect unused files and unused exports in used files
Installation
Via npm:
$ npm install webpack-deadcode-plugin --save-dev
Via yarn:
$ yarn add -D webp
react-hot-loader-loader
A Webpack Loader that automatically inserts react-hot-loader to your app, without any changes in your app code.
All it takes is a simple regex to indicate where your "App" Components are. This m
bundler-performance-benchmark
Why
Showing numbers means nothing if you can't back it up. This is a joint effort between all bundlers involved to create a fair and unbiased set of benchmarks for build and size
Microbundle
The zero-configuration bundler for tiny modules, powered by Rollup.
β¨
Features:
One dependency to bundle your library using only a package.json
Support for ESnext & asyn
add-asset-webpack-plugin
Dynamically add an asset to the webpack graph
Install
$ npm install add-asset-webpack-plugin
Usage
const AddAssetPlugin = require('add-asset-webpack-plugin');
m
Features
π
Blazing fast bundle times - multicore compilation, and a filesystem cache for fast rebuilds even after a restart.
π¦
Out of the box support for JS, CSS, HTML, file as
Webpack Simple Starter
A simple webpack starter without framework (Like Vue, React, Angular, etc.). This project is inspired from vue-cli webpack project
Getting Started
First, install the modules that the p
Demopack
Fire up a pre-configured, live reloading Webpack server that supports React, (S)CSS and files for quick demos and tutorials.
Like create-react-app, but without needing to create a new project and npm install a
Keep your bundle size in check
Setup
npm install bundlesize --save-dev
# or
yarn add bundlesize --dev
Usage
Add it to your scripts in package.json
"scripts": {
"test"
CommonJS Tree Shaker plugin for WebPack
ALPHA TESTING
Please file an issue if anything is broken.
NOTE: webpack version 3 may be needed in order to run this.
Why?
There are vast amount of CommonJS modul
webpack-plugin-extended-network
webpack plugin for analyzing how your bundle performs in a browser. This plugin is experimental and the API might change in the future. The plugin uses chrome-protocol and works with code
Bonsai
Trim your javascript dependency tree.
Users guide
The quickest way to get started is to generate a Webpack stats file, and then drag and drop it into https://pinterest.github.io/bonsai/analyze.
S
sketch-to-svg-json-loader
Import Sketch files as SVG JSON data through Webpack. Inspired by @david.gilbertson's wonderful article on icons as react components.
Install
yarn add sketch-to-svg-json-loader -
blrplt
Javascript
Write ES6+ or React Javascript and get it linted with the AirBnb eslint config.
Styles
All your styles get autoprefixed and sass compiled. It even has some lovely opinionated sty
neutrino-preset-visualizer
Webpack visualizer as a Neutrino preset to view where space is allocated. Outputs ./build/stats.html.
Installation
Grab the preset:
$ yarn add -D neutrino-preset-visualizer
Ad
lqip-loader: low quality images placeholders for webpack
demo
npm install --save-dev lqip-loader
Generating Base64 & dominant colours palette for a jpeg image imported in your JS bundle:
PS:
webpack-subresource-integrity
Webpack plugin for enabling Subresource Integrity.
Subresource Integrity (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN)
cache-loader
The cache-loader allow to Caches the result of following loaders on disk (default) or in the database.
Getting Started
To begin, you'll need to install cache-loader:
npm inst
Note: This only works on Webpack 4, if you're still on Webpack 3 or below please use version 1.x
CDN extension for the HTML Webpack Plugin
Enhances html-webpack-plugin functionality by allowing you to specify the mo
package-loader
Ext JS Dynamic Package Loader
Requirements
This package is used by Ext JS applications and Sencha Cmd 6.5
Install Sencha Cmd
Download Sencha Ext JS. We recommend extracting Ext JS into a
WASM Binary Module loader for Webpack
A simple .wasm binary file loader for Webpack. Import your wasm modules directly into your bundle as Constructors which return WebAssembly.Instance. This avoids the need to use f
webpack-chain
Use a chaining API to generate and simplify the modification of Webpack 2 and 3 configurations.
This documentation corresponds to v4 of webpack-chain.
v3 docs
v2 docs
v1 docs
Note: while webpac
[deprecated] AoT loader
β οΈ
This project is deprecated
β οΈ
Project is deprecated as AoT mode will be a default soon, we suggest using ngc until then as the official offering from Angular.
This lo
Webpack Hot Server Middleware
Webpack Hot Server Middleware is designed to be used in conjunction with webpack-dev-middleware (and optionally webpack-hot-middleware) to hot update Webpack bundles on the server.
SVG Sprite Webpack Plugin
Description
A webpack plugin/loader to make SVG <use>-based icon systems easy in Webpack. Creates an SVG sprite with <symbol> tags from imported SVG files, and return
webpack-codemods
JSCodeshift Codemods to automatically convert webpack config from v1 to v2
π§
π§
π§
π§
π§
π§
This repository is deprecated in favor of https://github.com/webpack/w
preload-webpack-plugin
A webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading.
Note: This is an extension p
preact-starter
Webpack3 boilerplate for building SPA / PWA / offline front-end apps with
βοΈ
Preact
Using preact-starter will kickstart your next application!
π―
It is designed to fit the "90% use-
A bundler that does it right
FuseBox on slack
FUSEBOX v4 is here
A re-write of FuseBox with Major Improvements is available in the @next release.
Please help test it and