Parcel: [V2] How to speed up parcel in development?

Created on 25 Nov 2019 · 5Comments · Source: parcel-bundler/parcel

❔ Question

import { CssBaseline, Button } from "@material-ui/core";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div>
    <CssBaseline />
    <Button>Hi2</Button>
  </div>,
  document.getElementById("root")
);

The above code took 3~5 seconds on rebuild when I add new character inside Button component. I noticed the bundler optimizing index.html on every rebuild. Is it the expected behavior? How to speed thing up?

I use parcel serve index.html command to bundle my react application.

🔦 Context

"parcel": "^2.0.0-alpha.3.2"
"react": "16.12.0",
"react-dom": "16.12.0",
"@material-ui/core": "4.7.0",

💻 Code Sample

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-alpha 3.2
| Node | 10.17.0
| npm/Yarn | Yarn 1.19.1
| Operating System | MacOS Catalina 10.15.2 Beta (19C32e)

Question ✨ Parcel 2

Source

xiaoyu-tamu

Most helpful comment

Okay, so I've done more testing and indeed this doesn't solve the issue :/

This is rebuild in V2:
new-rebuild

And here is from V1:
old-rebuild

And for good measure, this is the same app build using Create-React-App (sorry for the video form, but CRA doesn't show the rebuild time as Parcel does). It builds basically in milliseconds 😬.

Note: I have recently reinstalled macOS from scratch...

Here is the codebase that I've run those test on: https://github.com/taniotanio7/parcel-performance-test

taniotanio7 on 20 Dec 2019

👍2

All 5 comments

I don't think it is expected behavior.
I'm using Material-UI as well with a bunch of other packages and also struggled with slow build times.

So... I've made this .parcelrc file:

{
  "extends": "@parcel/config-default",
  "optimizers": {
    "*.js": [],
    "*.html": [],
    "*.css": []
  }
}

And the build time shrunk from around ~8s to 500ms/1s.
So yeah... I think that the default config should have no optimizations for the development bundle. However, I don't see any way to make this config just for the development bundle.

taniotanio7 on 18 Dec 2019

I think it is good idea to mention that I'm using 2015 Macbook Air processor. Not the most powerful machine 😅 , but still shouldn't the build time take less than 2 seconds for simple text edits? 🤔

taniotanio7 on 18 Dec 2019

It does not works for me.. I'm using MacBook Pro 16 with 2.3 GHz 8-Core Intel Core i9. After use @taniotanio7 .parcelrc file. Parcel still take 1.5 ~ 2 seconds to build a simple app.

// index.tsx
import { Button, CssBaseline } from "@material-ui/core";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div>
     test<Button>Hi</Button>
  </div>,

  document.getElementById("root")
);

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel | React Exa3333mple</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="index.tsx"></script>
  </body>
</html>

partial package.json

  "dependencies": {
    "@material-ui/core": "4.8.0",
    "@material-ui/icons": "4.5.1",
    "@material-ui/lab": "4.0.0-alpha.36",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "devDependencies": {
    "parcel": "^2.0.0-alpha.3.2"
  },
  "scripts": {
    "demo": "parcel serve src/index.html"
  }

RESULT

$ parcel serve src/index.html
Server running at http://localhost:1234
✨ Built in 1.72s.

xiaoyu-tamu on 18 Dec 2019

Okay, so I've done more testing and indeed this doesn't solve the issue :/

This is rebuild in V2:
new-rebuild

And here is from V1:
old-rebuild

And for good measure, this is the same app build using Create-React-App (sorry for the video form, but CRA doesn't show the rebuild time as Parcel does). It builds basically in milliseconds 😬.