We strongly believe that staying close to browser standards will be the best long term investment for your code. It is the basis for all our recommendations, and it means that sometimes we will not recommend a popular feature or functionality. It also means we can be faster to adopt and recommend new browser standards.
Building web apps
Building is a necessary optimization when shipping apps to production. Generally speaking, build tools accomplish some or all of the following:
- Reduce app size (tree shaking, inlining, minification etc.)
- Bundling and code splitting (combining many into few files)
- Transforming/polyfilling standard code for older browsers
- Transforming/polyfilling experimental standards (stage 3 proposals) for older browsers
- Transforming/polyfilling non-standard code
index.html as an entry point
Our configs for
webpack are unique in that sense that they take a single html file as an entry point.
Doing so allows you to work with the same entry point no matter if you use
- polymer serve
This means you can easily compare how different setups affect your app size and loading time.
This allows you to easily switch between build configurations; if you want to switch to webpack for a while, your entrypoint will be exactly the same.
It also means you can use
es-dev-server for your regular development, and then use either
webpack to prepare your application for your production environment.
Rollup is focused on statically analyzing es module based projects, significantly reducing the size of your app through tree shaking, minification and code splitting. Rollup can output es modules, making use of the native module loader available in modern browsers.
Our default configuration gets your started with a setup for modern browsers, and optionally for supporting legacy browsers.
Webpack is a popular and flexible build tool, with a large ecosystem of plugins. Out of the box, webpack handles different module formats, such as esm, commonjs, amd and umd. It is not able to output native es modules, relying instead on it's own module loader.
Compared to rollup it is a more complex tool, with more options for composing and managing complex projects. It also comes with a dev server with features such as auto-reload and hot module reloading.
Because webpack is not able to output native es modules, and because it has a steeper learning curve, we don't recommend it for general use. However if you have more complex requirements, or because you have to integrate with an existing setup, it can still be a great choice. We have a default configuration available to get you started.