search

microsoft / monaco-editor-webpack-plugin

Moved to https://github.com/microsoft/monaco-editor
482 stars 98 forks source link

Slow compile time #76

Closed juhawilppu closed 4 years ago

juhawilppu commented 5 years ago

The compile time of my React project increases significantly after adding Monaco editor. Sometimes taking up to 1 min 30 s when it originally took max 30 s.

It's not a surprise since Monaco is a huge library, but I'm mainly wondering about these huge worker files in my optimized build. Have I misconfigured my project somehow, should these really be in the build?

I'm using a non-ejected create-react-app

    "dependencies": {
        "monaco-editor": "^0.18.1",
        "monaco-editor-webpack-plugin": "^1.7.0",
        "react-scripts": "^3.2.0",
        ...
    },
    "devDependencies": {
        "react-app-rewired": "^2.1.1",
        "typescript": "3.6.4",
        ...
  }

After npm run build I'm seeing

File sizes after gzip:

  782.03 KB  build/static/js/3.ce211eac.chunk.js
  771.31 KB  build/typescript.worker.js
  380.22 KB  build/static/js/4.bf8b073d.chunk.js
  141.66 KB  build/css.worker.js
  74.64 KB   build/html.worker.js
  62.11 KB   build/static/js/main.ccd17313.chunk.js
  50.58 KB   build/json.worker.js
  36.02 KB   build/static/css/3.d24b89e0.chunk.css
  27.35 KB   build/editor.worker.js
  7.53 KB    build/static/js/55.4ef47588.chunk.js
  6.4 KB     build/static/js/46.a7f63dcf.chunk.js
  6.18 KB    build/static/js/28.37eb30d6.chunk.js
  5.89 KB    build/static/js/53.f16faf7a.chunk.js
  5.44 KB    build/static/js/54.075b7483.chunk.js
  5.01 KB    build/static/js/25.8b8df476.chunk.js
  4.78 KB    build/static/js/31.35341305.chunk.js
  4.35 KB    build/static/js/45.f4b0a646.chunk.js
  4.24 KB    build/static/js/38.73ce43ba.chunk.js
  3.93 KB    build/static/js/56.a8645251.chunk.js
  3.46 KB    build/static/js/9.b03e1a9c.chunk.js
  3.06 KB    build/static/js/27.bcdf4d57.chunk.js
  2.72 KB    build/static/css/main.e91fbd6d.chunk.css
  2.39 KB    build/static/js/30.9b97ef65.chunk.js
  2.35 KB    build/static/js/39.b91312bd.chunk.js
  2.08 KB    build/static/js/36.6066c54c.chunk.js
  2.05 KB    build/static/js/5.a7d380cb.chunk.js
  2.04 KB    build/static/js/29.bdf41560.chunk.js
  2.03 KB    build/static/js/47.160c9222.chunk.js
  2.02 KB    build/static/js/0.8c14b08e.chunk.js
  2.01 KB    build/static/js/50.d8b3a839.chunk.js
  1.93 KB    build/static/js/24.de9281d7.chunk.js
  1.92 KB    build/static/js/49.57275bf1.chunk.js
  1.75 KB    build/static/js/6.85dbafd9.chunk.js
  1.75 KB    build/static/js/40.7be8b49c.chunk.js
  1.73 KB    build/static/js/43.fefb7384.chunk.js
  1.72 KB    build/static/js/11.484d1951.chunk.js
  1.64 KB    build/static/js/33.06e31445.chunk.js
  1.6 KB     build/static/js/48.1b72796f.chunk.js
  1.6 KB     build/static/js/runtime-main.5eb37952.js
  1.47 KB    build/static/js/37.409baca6.chunk.js
  1.41 KB    build/static/js/21.c5a2b14f.chunk.js
  1.37 KB    build/static/js/34.169baa6f.chunk.js
  1.37 KB    build/static/js/13.e44d95c5.chunk.js
  1.37 KB    build/static/js/32.4d9d0e5a.chunk.js
  1.33 KB    build/static/js/20.5ddcbacd.chunk.js
  1.33 KB    build/static/js/17.26b338e3.chunk.js
  1.31 KB    build/static/js/15.aa20b655.chunk.js
  1.31 KB    build/static/js/10.b8df5b16.chunk.js
  1.26 KB    build/static/js/23.6cc16668.chunk.js
  1.23 KB    build/static/js/52.7b5d5fb4.chunk.js
  1.19 KB    build/static/js/18.5445ab65.chunk.js
  1.18 KB    build/static/js/35.f05e0278.chunk.js
  1.16 KB    build/static/js/44.87f2eb91.chunk.js
  1.15 KB    build/static/js/16.aa3ebfcd.chunk.js
  1.07 KB    build/static/js/26.f75f89d2.chunk.js
  958 B      build/static/js/22.3251516f.chunk.js
  899 B      build/static/js/8.a46278cb.chunk.js
  862 B      build/static/js/41.117b1368.chunk.js
  853 B      build/static/js/42.b4e37f22.chunk.js
  739 B      build/static/js/14.251b34d3.chunk.js
  659 B      build/static/js/51.5e30f329.chunk.js
  570 B      build/static/js/19.8d9f6df8.chunk.js
  563 B      build/static/js/12.e019bf22.chunk.js
  361 B      build/static/js/7.e811826d.chunk.js

The project was built assuming it is hosted at /{redacted}/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://bit.ly/CRA-deploy
alexdima commented 4 years ago

This is normal. If you don't need all those languages, you don't need to ship them and then can save on webpacking time by using the languages option and reduce to only the languages you will use at runtime.