Research: parceljs

[gallayl]

We should check if we can change our packaging / bundling pipeline from webpack and create-react-app to parceljs.

Tasks

• [x] Compare dependencies with
  • [x] a manually built webpack bundle
  • [x] a package created with create-react-app
• [x] Compare usage
  • [x] dev. server functionality
  • [x] compiling times
  • [x] support for environment variables
• [x] Check compatibility with CI tools
• [x] update and test Parcel on some complex packages
  • [x] sn-document-viewer-react)
  • [x] sn-community-app
• [x] summarize
• [ ] ~give an estimate for the remaining packages~

Summary

• Migrating a webpack or create-react-app project is quite easy
• There aren't major differences in terms of speed, functionality or bundle size
• There where issues with incremental bundling vs. sourcemapping
• There where issues with async operators vs. Babel polyfills
• We shouldn't migrate our projects from webpack to parcel right now

[gallayl]

Sn-document-viewer package summary

Installed dependencies (reported by npm audit)

Webpack: 15243 (14707 dev, 222 optional) 👎 Parcel: 8421 (1542 dev, 127 optional) 👍

Initial compile time:

Webpack: 10348ms 👍 Parcel: 13.5s(cahed) - 26.04s(no cached) 👎

Bundle (dist folder) size:

Webpack: 9.55MB 👎 Parcel: 8.16MB 👍

Network transfer size on page load

Webpack: 5.7MB 👎 Parcel: 5.2MB 👍

Summary

• Parcel has all features that we use (compile typescript, create / analyze bundle, dev. server, replace environment variables) and a simple webpack project can be converted easily.
• It has less dependencies then webpack
• Parcel compiles async methods

Pros:

• Referencing in index file is simplified
• works without config file and a simple "--out-dir" parameter out of the box

Cons:

• I had issues with the async-await syntax
• I had to add "babel-polyfills" and "core-js" manually as a dependency

[gallayl]

sn-community-app

Installed packages (reported by NPM Audit):

Webpack: 19922 (1029 dev, 177 optional) 👍 Parcel: 29746 (52 dev, 675 optional) 👎

Initial compile time:

Webpack: 14862ms 👍 Parcel: (20.9s) (38.39s w/o cache) 👎

Bundle (dist folder) size:

Webpack: 9.35mb 👎 Parcel: 8.8mb 👍

Network transfer size on page load:

Webpack: 1.5MB (?) 👍 Parcel: 6.4MB 👎

Summary

• I had the same issues with async/await and needed to install babel-polyfills and core-js as a workaround
• I have to update the material design package, remove rxjs / redux-observables and refactor to a promise middleware
• I had issues with the sourcemaps and the dev server - incremental builds seems to mess up the source mapping. The workaround is to restart the dev. server