4 ms·

Hah, I literally spent a day trying to use parcel to optimize a good old fashioned HTML+CSS+JS static site that's not an SPA. Webpack would be a pain to set up

Hah, I literally spent a day trying to use parcel to optimize a good old fashioned HTML+CSS+JS static site that's not an SPA. Webpack would be a pain to set up and all other bundlers were lacking for such an use case. Parcel 1 worked great on my machine, and then on the server decided to flatten all files to a single folder - effectively breaking the site. I had no clue as to why, probably something related to having low memory, and the reigning response on the issue tracker was 'forget about v1, use Parcel v2'. So I tried installing and running it on my machine but it would get stuck building unless I gave it a '--no-cache' option (took a while to figure that out), and then on the server the thing wouldn't even (npm) install. Each time I tried it failed kind of differently, mostly because of node-gyp, other times because of weird GLIBC. After all that I just gave up, maybe in a month I'll be in the mood to set up the Webpack madness - but it's more likely I'll end up rewriting the whole site as an SPA because the bundler gods demand it be so.

crooked-v 5y ago
If you decide to do an SPA, I'd recommend Next.js, because even if you use zero of the features and just put everything in a single index.jsx component, it does all the Webpack stuff for you. It also has some other useful stuff like easy support for rendering plain Markdown files into static files at build time, so you can use it as a more capable alternative to tools like Jekyll [1]. [1]: https://nextjs.org/blog/markdown https://nextjs.org/blog/markdown
- ggregoire 5y ago
  Just use create-react-app if you don't need any of the features provided by next.js. https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains https://reactjs.org/docs/create-a-new-react-app.html#recomme...
- phreack 5y ago
  Yeah, I love next.js. I'm much more willing to go that route than fight Webpack.
mamcx 5y ago
I commit the mistake of doing SPA, ONCE. But happily revert back. I have a single build.sh script with the proper build steps (them are so simply that make or other thing is excessive). So, if you already know how do thing step by step, just do that!
bung 5y ago
I'm not sure if I'm a dinosaur or not, but for "old fashioned" HTML+CSS+JS static builds I've rolled my own Gulp setup that does what I tell it to. It's an investment of a couple days I'm sure, but have yet to just try Webpack to see how well it works for that purpose too, can anyone else comment? Being stuck in Visual Studio 2019 right now for other reasons, I've been using some of it's "Lib Man" client-side library installers to help reduce the amount of gulp required too. Basically all your vendor/polyfill "lib" can just be brought and managed with a couple of clicks.
- phreack 5y ago
  I also tried that, but didn't find any pre-made gulpfiles for it and after half an hour of trying to make one I decided it wasn't worth the effort, but it's definitely still a great tool.
  - bung 5y ago
    half an hour... wow, well if you find something that easy let me know. If you want to specify your supported browsers and utilize transpiling (babel), maybe do some image minification (svgo), compile using the latest sass module features (dart sass), create separate script bundles for required/deferred JS with revision hashes (rev), dynamically generate test/demo HTML files and test them (backstopjs) ... I can't imagine there is a system out there that can handle even half of those things so easily. I always assumed I would need to tell the system what to do. If you do decide to go looking around at Gulp again, for myself after reading a few articles on Gulp setups I googled for "github gulpfile.js" to see what others had done as well and that helped.
    - phreack 5y ago
      Well, Parcel touts minification, removing unused code, transpiling, and other goodies. If it worked, it really would have been perfect, I could have set it up in minutes. The half-hour I mentioned for Gulp was only enough to make me realize that it would have taken me way longer than I wanted to spend on this problem just to shave a few hundred kilobytes of an early stage website (my main goal), not how much I wanted to spend to get a specific grocery list of features done.

crooked-v 5y ago

If you decide to do an SPA, I'd recommend Next.js, because even if you use zero of the features and just put everything in a single index.jsx component, it does all the Webpack stuff for you. It also has some other useful stuff like easy support for rendering plain Markdown files into static files at build time, so you can use it as a more capable alternative to tools like Jekyll [1]. [1]: https://nextjs.org/blog/markdown https://nextjs.org/blog/markdown

ggregoire 5y ago
Just use create-react-app if you don't need any of the features provided by next.js. https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains https://reactjs.org/docs/create-a-new-react-app.html#recomme...
phreack 5y ago
Yeah, I love next.js. I'm much more willing to go that route than fight Webpack.

mamcx 5y ago

I commit the mistake of doing SPA, ONCE. But happily revert back. I have a single build.sh script with the proper build steps (them are so simply that make or other thing is excessive). So, if you already know how do thing step by step, just do that!

bung 5y ago

I'm not sure if I'm a dinosaur or not, but for "old fashioned" HTML+CSS+JS static builds I've rolled my own Gulp setup that does what I tell it to. It's an investment of a couple days I'm sure, but have yet to just try Webpack to see how well it works for that purpose too, can anyone else comment? Being stuck in Visual Studio 2019 right now for other reasons, I've been using some of it's "Lib Man" client-side library installers to help reduce the amount of gulp required too. Basically all your vendor/polyfill "lib" can just be brought and managed with a couple of clicks.

phreack 5y ago
I also tried that, but didn't find any pre-made gulpfiles for it and after half an hour of trying to make one I decided it wasn't worth the effort, but it's definitely still a great tool.
- bung 5y ago
  half an hour... wow, well if you find something that easy let me know. If you want to specify your supported browsers and utilize transpiling (babel), maybe do some image minification (svgo), compile using the latest sass module features (dart sass), create separate script bundles for required/deferred JS with revision hashes (rev), dynamically generate test/demo HTML files and test them (backstopjs) ... I can't imagine there is a system out there that can handle even half of those things so easily. I always assumed I would need to tell the system what to do. If you do decide to go looking around at Gulp again, for myself after reading a few articles on Gulp setups I googled for "github gulpfile.js" to see what others had done as well and that helped.
  - phreack 5y ago
    Well, Parcel touts minification, removing unused code, transpiling, and other goodies. If it worked, it really would have been perfect, I could have set it up in minutes. The half-hour I mentioned for Gulp was only enough to make me realize that it would have taken me way longer than I wanted to spend on this problem just to shave a few hundred kilobytes of an early stage website (my main goal), not how much I wanted to spend to get a specific grocery list of features done.