No build progress when running microbundle command

[ps-rakeshchintha]

currently when running microbundle command, there is no indication as to what is happening and the progress of the process. The console just stays empty for 2-5 minutes and spits out the bundled output with sizes.

I have been through the configurations/options but found no option which enables showing build progress.

Any plans for adding this feature?

[developit]

2-5 minutes is the longest I've ever heard of Microbundle taking. Are you bundling something massive? It usually takes 2-5 seconds.

[ps-rakeshchintha]

My application is fairly simple. Its a typescript project with hardly 10 files which does not have more than 200 lines per file. I am also am setting --external none --compress false flags if that helps. external dependencies: uuid and mitt packages (those are also very small) My final bundle size is around 9-10kb.

Let me know if need any specific information about my application setup.

[ForsakenHarmony]

is the project open source? that's not normal

[ps-rakeshchintha]

Unfortunately no. Its not a open source project. Here is the snapshot of package.json

{
  "version": "1.0.0",
  "main": "dist/index.js",
  "umd:main": "dist/index.umd.js",
  "module": "dist/index.modern.js",
  "source": "src/index.ts",
  "files": [
    "dist",
    "README.md"
  ],
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "microbundle --external none --compress false",
    "dev": "microbundle watch --external none",
    "lint": "eslint src/**/* __tests__/**/* --ignore-pattern=__tests__/__snapshots__/**/*",
    "test": "jest"
  },
  "devDependencies": {
    "@types/jest": "^24.0.25",
    "@typescript-eslint/eslint-plugin": "^2.15.0",
    "@typescript-eslint/parser": "^2.15.0",
    "eslint": "^6.8.0",
    "jest": "^24.9.0",
    "microbundle": "^0.12.0-next.6",
    "husky": "^4.0.10",
    "lint-staged": "^10.0.1",
    "prettier": "^1.19.1",
    "ts-jest": "^24.3.0",
    "typescript": "^3.7.4"
  },
  "license": "UNLICENSED",
  "dependencies": {
    "@types/uuid": "^3.4.6",
    "mitt": "^1.2.0",
    "promise-polyfill": "8.1.3",
    "uuid": "^3.3.3",
    "whatwg-fetch": "^3.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.ts": [
      "npm run lint",
      "prettier --write"
    ]
  }
}

please suggest if there is anything that is out of place or incorrect causing the long wait time for bundling.

[ForsakenHarmony]

looks fine to me :thinking:

[developit]

@ps-rakeshchintha it's a long shot, but could you check to see if your builds still take 2 minutes when you comment out import "whatwg-fetch"?

[ps-rakeshchintha]

Not sure what changed but, the build time reduced from an average of 3 minutes to 30 seconds with or without import "whatwg-fetch" now. I have not updated any dependencies at all. I can live with this.

[ForsakenHarmony]

Still seems a bit long, but better than before :upside_down_face:

[MarkLyck]

My build also takes several minutes and thought a progress bar/indicator would be very helpful!

I also don't have anything I could think of that should make my build especially slow? Which is now more concerning;

A good implementation might even be able to help debug which part of our applications takes suspiciously long to bundle :)

[developit]

@MarkLyck any chance your project is Open Source?

I would love to have a repository I could use to get to the bottom of this. Builds should not be taking anywhere near that long.

Also agreed about having a way to gather and display metrics. Short of a progress bar, that would at least let us narrow this down. My guess is that it's caused by Babel being executed twice, and one of those passes including all of node_modules. This is the case when using --define.

[MarkLyck]

Unfortunately, it's not open-source, and not owned by me so I can't share it.

@developit so I figured out one of the problems.

One of the Npm packages I used, caused a Circular Dependency and that dramatically slowed down my build. Once I fixed that it went from ~4 minutes to 50 seconds.

Still quite long, but a lot better.

My main and biggest dependency is React-admin. (unfortunately, it's huge) so I'm not sure if 50-60 second build times are expected or not at this point. 5 minutes definitely isn't but I'm okay with. it after I discovered the Circular dependency

[developit]

@MarkLyck ah - react-admin is 250kb and not particularly tree-shakeable. 50s isn't great honestly, but it's not totally outlandish for the amount of code being processed.

One thing I am curious about though: are you bundling a website, or a library? If a library, microbundle shouldn't really be touching react-admin since it would be an external dependency.

[MarkLyck]

@developit yeah that's what I thought.

I'm bundling a library. This is the output from this morning:

$ microbundle
node-resolve: setting options.module is deprecated, please override options.mainFields instead
node-resolve: setting options.jsnext is deprecated, please override options.mainFields instead
node-resolve: setting options.module is deprecated, please override options.mainFields instead
node-resolve: setting options.jsnext is deprecated, please override options.mainFields instead
node-resolve: setting options.module is deprecated, please override options.mainFields instead
node-resolve: setting options.jsnext is deprecated, please override options.mainFields instead
No name was provided for external module '@fortawesome/fontawesome-svg-core' in output.globals – guessing 'fontawesomeSvgCore'
No name was provided for external module '@fortawesome/free-solid-svg-icons' in output.globals – guessing 'freeSolidSvgIcons'
No name was provided for external module '@api-platform/admin' in output.globals – guessing 'admin'
No name was provided for external module '@react-keycloak/web' in output.globals – guessing 'web'
No name was provided for external module '@api-platform/api-doc-parser/lib/Api' in output.globals – guessing 'Api'
No name was provided for external module '@api-platform/api-doc-parser/lib/Field' in output.globals – guessing 'Field'
No name was provided for external module '@api-platform/api-doc-parser/lib/Resource' in output.globals – guessing 'Resource'
No name was provided for external module 'react-redux' in output.globals – guessing 'reactRedux'
No name was provided for external module '@material-ui/core/Toolbar' in output.globals – guessing 'Toolbar'
No name was provided for external module '@material-ui/core/Typography' in output.globals – guessing 'Typography'
No name was provided for external module 'keycloak-js' in output.globals – guessing 'Keycloak'
No name was provided for external module '@material-ui/core/Button' in output.globals – guessing 'Button'
No name was provided for external module 'lodash.set' in output.globals – guessing 'set'
No name was provided for external module 'google-geocoder' in output.globals – guessing 'geocoder'
No name was provided for external module '@material-ui/icons/Router' in output.globals – guessing 'RouterIcon'
No name was provided for external module '@material-ui/icons/WebAsset' in output.globals – guessing 'WebAssetIcon'
No name was provided for external module '@fortawesome/react-fontawesome' in output.globals – guessing 'reactFontawesome'
No name was provided for external module 'react-admin' in output.globals – guessing 'reactAdmin'
No name was provided for external module 'recompose/pure' in output.globals – guessing 'pure'
No name was provided for external module '@material-ui/core' in output.globals – guessing 'core'
No name was provided for external module 'recompose/compose' in output.globals – guessing 'compose'
No name was provided for external module 'lodash/omit' in output.globals – guessing 'omit'
No name was provided for external module 'styled-components' in output.globals – guessing 'styled'
No name was provided for external module '@material-ui/core/styles' in output.globals – guessing 'styles'
Build "XXX" to dist:
      17.7 kB: bundle.js.gz
      15.3 kB: bundle.js.br
      17.8 kB: bundle.mjs.gz
      15.5 kB: bundle.mjs.br
        18 kB: bundle.umd.js.gz
      15.6 kB: bundle.umd.js.br
✨  Done in 68.81s.

I saw the override options.mainFields warnings were fixed in the @next version (but something else breaks for me, don't remember what so I'm waiting for it to be "stable")

It may be the No name was provided for external module errors? I'm not entirely sure why that is happening

[developit]

@MarkLyck I'd recommend disabling UMD output in your case, since the names it's guessing are going to be incorrect:

microbundle -f es,cjs,modern

This will speed up the build and silence the "no name was provided" warnings.