Are you also tired and fed up with the bulkiness of jQuery, but also don't want to have to type document.querySelector("div").appendChild(document.createTextNode("hello")); just to add some text to an element?

Alternatively, you can build a custom icon system from existing icon libraries. To save on load times and improve performance, I would recommend always creating icon systems that include only the icons that you will use. If you’re only using 10 of them throughout your site, there is no good reason to link to the entire Fontawesome library of icons.

Microbundle also outputs a modern bundle specially designed to work in all modern browsers. This bundle preserves most modern JS features when compiling your code, but ensures the result runs in 90% of web browsers without needing to be transpiled. Specifically, it uses preset-modules to target the set of browsers that support <script type="module"> - that allows syntax like async/await, tagged templates, arrow functions, destructured and rest parameters, etc. The result is generally smaller and faster to execute than the esm bundle

Replaced nested `require` statements with `import` declarations for the sake of a leaner bundle. This entails adding empty imports to three files to guarantee correct ordering – see https://github.com/styled-components/styled-components/pull/100

Perhaps we should detect URLSearchParams objects differently (using duck typing detection instead of instanceof window.URLSearchParams, for example) but the solution isn't adding a specific polyfill to Axios (as it'd increase the bundle size and still won't work with other polyfills).

Many people recently are complaining about bundler performance. But I don’t think any tool is going to solve performance problems. Bundlers can try innovative ideas such as multi-threading and improved caching, but you’re always going to hit a limit. If you’re having performance problems, it’s more likely because you’re not keeping tabs of what you’re importing, and haven’t considered splitting your project into multiple projects.

There'll be no more warnings. But if you open bundle.js, you'll see something shocking: it contains the entirety of React and React DOM. That's 7000 LoC!

This is a demonstration of building a custom D3 4.0 bundle using ES2015 modules and Rollup. Custom bundles can be optimized to contain only the code you need. This example exposes just three fields on the d3 object: d3.event, d3.select and d3.selectAll. The minified and gzipped bundle is only 3,691 bytes, a savings of 93% over the default build!

Why I’m excited about ES6 modules: a custom build of D3 4.0 in 3,610 gzipped bytes. (93% smaller!)

If we compile our empty component and bundle it with Svelte internals, it ends up being 2,080 bytes uncompressed, and 1,043 bytes gzipped. So the overhead for using Svelte ends up being only a kilobyte. Compare that to other frameworks that require 10x or 100x that many bytes just to mount an empty component!