Sharing Top Content from the Angular-sphere.

Bundle Angular ESM2015 With Rollup

  • ESM5 is a hybrid format consisting mostly of regular ES5 JavaScript, but with import/export statements added as the only ES2015 feature.
  • ESM2015 will of course also satisfy Rollup’s ES2015 module requirement, but down-leveling will typically be required if you target older browsers.
  • There is a new field in package.json called es2015, but I don’t think the nodeResolve plugin is aware of this setting.
  • ES2015 JavaScript is not compatible with the Uglify plugin since Uglify only works with ES5.
  • It’s a bit tricky to determine if the size difference is a result of better Rollup performance against pure ES2015.

Today I will test if there is a noticeable change in Angular bundle size from using ESM2015 bundles vs ESM5 bundles when using Rollup.

In case you are wondering about terminology, ESM2015 is a pure ES2015 (ES6) distribution of Angular.

ESM5 is a hybrid format consisting mostly of regular ES5 JavaScript, but with import/export statements added as the only ES2015 feature.

ESM5 is practical for Rollup bundling since it satisfies Rollup’s ES2015 module requirement. Another benefit is that there is no need for down-leveling to ES5 since the only ES2015 feature (import/export statements) falls out during bundling.

By “falling out”, I mean the import/export statements themselves are not bundled into the final bundle.

ESM2015 will of course also satisfy Rollup’s ES2015 module requirement, but down-leveling will typically be required if you target older browsers.

Due to the simplicity of using ESM5 with Rollup I have generally opted for this solution. I really like that you can define the whole bundling process in a single rollup-config file. Basically everything from node resolution via “module” in package.json to minification via the Uglify plugin can be defined in one place.

In this experiment, all application code + Angular framework code will be included as ES2015 JavaScript.

Targeting the ESM2015 bundles is slightly more complex. First we have to redirect Rollup to the folder where the ES2015 bundles are located. There is a new field in package.json called es2015, but I don’t think the nodeResolve plugin is aware of this setting.

Instead I opted to write a…

Bundle Angular ESM2015 With Rollup