Hi everybody,
I’m playing around with the asset pipeline and I tried for example to replace Webpack with Rollup.
While I somehow managed to get the pipeline working (I’m trying Svelte btw) I’m getting a lot of Live reload debug events when I’m changing a file (around 40 lines!).
In my package.json
file (from a svelte project) I got the following script tasks:
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
So I set the following watcher in my dev.exs
file:
watchers: [yarn: ["dev", cd: Path.expand("../assets", __DIR__)]]
If you’re interested, here is a pastebin of an example log I got when I save a file.
Also something weird is that it took almost half a second (here 458ms for example, but it can be more or less) while I have a very little project (a simple sveltejs/template starter project actually).
For example I compared live reload time compilations with a bare Svelte JS project (without Phoenix) with both Rollup and Webpack, and did the same within Phoenix, with Rollup and Webpack.
In the Phoenix Webpack version I got also several debug Live reload
lines, but it’s way more less (~6). It’s also way more faster with webpack.
Here is a pasthebin of the log for the Webpack version.
Regarding both of the Phoenix projects I’m running them inside docker while I tested the bare JS versions of Svelte in my host without docker.
For the bare JS versions, the compilation times are a little faster, but in any cases the rollup version is also faster (80~100ms) than the webpack version (100~150ms). Which is more the expecting situation if I look around the internet about benchmarks.
I’m not counting the ms (even if with half a second it becomes really noticeable and the pages are flickering which is kind of annoying) but it’s rather all those logging lines that is frustrating.
But I heard around that Rollup is known to be fast…
Does anyone know what I’m doing wrong?
NB: Here are some pastebins for:
- The package.json the Phoenix Svelte Rollup
- The rollup.config.js for the Phoenix Svelte Rollup
- The package.json the Phoenix Svelte Webpack
- The webpack.config.js for the Phoenix Svelte Webpack
Thank you very much.