Skip to content
This repository has been archived by the owner on Aug 1, 2022. It is now read-only.

refactor(build): replace rollup with webpack to make build faster #1710

Merged
merged 1 commit into from
Mar 31, 2021

Conversation

geigerzaehler
Copy link
Contributor

We replace rollup with webpack to make our builds faster. While webpack is not faster without a cache it supports persistent caches in the file system which makes it significantly faster in development. Webpack is also significantly faster in watch mode.

On my machine a rollup build and a webpack build without a cache take about 60 seconds. If a cache is present webpack builds the project in 8-9 seconds. When updating a file in watch mode rollup takes 7-8 seconds to rebuild. Webpack rebuilds the project in under a second.

Another thing to note is that in the past I spent multiple hours investigating issues with rollup and tweaking the config. None of this was necessary for webpack. We also gain more functionality, for example we can now leverage templating in the HTML document.

Some implementation notes:

  • We patch package.json of svelte-persistent-store because of this issue. This only worked before because rollup itself was buggy.
  • We add some dependencies that are used in our source code but were not explicitly specified.
  • We use html-webpack-plugin to dynamically build public/index.html and configure it for different environments.
  • We remove bundle.css. CSS is now injected during runtime via JS.

Follup-up:

  • We still need to leverage the webpack cache on CI

@geigerzaehler geigerzaehler requested a review from a team as a code owner March 25, 2021 17:01
@geigerzaehler geigerzaehler requested a review from a team March 25, 2021 17:01
NunoAlexandre
NunoAlexandre previously approved these changes Mar 29, 2021
Copy link
Contributor

@NunoAlexandre NunoAlexandre left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome 🌻

};

function electronMain(_env: unknown, argv: Argv): webpack.Configuration {
const mode = argv.mode || "development";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion

Have a function to dry the mode fallback and call it directly when setting the mode field:

  mode: getMode(argv),

@geigerzaehler geigerzaehler requested review from rudolfs and xla March 29, 2021 08:50
xla
xla previously approved these changes Mar 30, 2021
Copy link
Contributor

@xla xla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

utACK

🔐 🐂 👴 🍿

rudolfs
rudolfs previously approved these changes Mar 30, 2021

Verified

This commit was signed with the committer’s verified signature.
benjamn Ben Newman
We replace `rollup` with `webpack` to make our builds faster. While
webpack is not faster without a cache it supports persistent caches in
the file system which makes it significantly faster in development.
Webpack is also significantly faster in watch mode.

On my machine a rollup build and a webpack build without a cache take
about 60 seconds. If a cache is present webpack builds the project in
8-9 seconds. When updating a file in watch mode rollup takes 7-8 seconds
to rebuild. Webpack rebuilds the project in under a second.

Another thing to note is that in the past I spent multiple hours
investigating issues with rollup and tweaking the config. None of this
was necessary for webpack. We also gain more functionality, for example
we can now leverage templating in the HTML document.

Some implementation notes:
* We patch `package.json` of `svelte-persistent-store` because of [this
  issue][sps-issue]. This only worked before because rollup itself was
  buggy.
* We add some dependencies that are used in our source code but were not
  explicitly specified.
* We use `html-webpack-plugin` to dynamically build `public/index.html`
  and configure it for different environments.
* We remove `bundle.css`. CSS is now injected during runtime via JS.

Follup-up:
* We still need to leverage the webpack cache on CI

[sps-issue]: andsala/svelte-persistent-store#15

Signed-off-by: Thomas Scholtes <thomas@monadic.xyz>
@geigerzaehler geigerzaehler dismissed stale reviews from rudolfs, xla, and NunoAlexandre via 506fedd March 31, 2021 08:36
@geigerzaehler geigerzaehler merged commit 506fedd into master Mar 31, 2021
@geigerzaehler geigerzaehler deleted the thomas/rollup branch March 31, 2021 08:48
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants