Skip to content

Migrate build from Webpack to Vite#91

Merged
AlexeyMz merged 1 commit into
masterfrom
replace-webpack-with-vite
Nov 8, 2025
Merged

Migrate build from Webpack to Vite#91
AlexeyMz merged 1 commit into
masterfrom
replace-webpack-with-vite

Conversation

@AlexeyMz
Copy link
Copy Markdown
Member

@AlexeyMz AlexeyMz commented Nov 7, 2025

  • Remove all Webpack-related dev-dependencies;
  • Add dev-dependency on vite and vite-plugin-css-injected-by-js;
  • Move Vitest config into main Vite configuration;
  • Use separate tsconfig.node.json for build scripts (e.g. Vite and Vitest configuration);
  • Set "type": "module" in package.json;
  • Enable "isolatedModules": true in tsconfig, fix missing type for re-exported types;
  • Change examples to have separate HTML for each entry point with shared code for settings;

TODO:

  • Check built library with Reactodia docs

@AlexeyMz AlexeyMz force-pushed the replace-webpack-with-vite branch from 931b96b to e66b35a Compare November 7, 2025 22:26
@AlexeyMz
Copy link
Copy Markdown
Member Author

AlexeyMz commented Nov 7, 2025

Measured LoC stats with cloc:

-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
TypeScript                     168           4343           8244          32397
JSON                            10              2              0           8740
SCSS                            59            717             36           3664
Markdown                         6            202              0           1188
SVG                             28              4              4            822
HTML                            10              0              0            141
JavaScript                       1              1              0             91
CSS                              3              9              0             57
YAML                             1              9              0             57
INI                              1              7              0             21
-------------------------------------------------------------------------------
SUM:                           287           5294           8284          47178
-------------------------------------------------------------------------------

Measured bundle sizes:
before

 179450 layout.worker.js
 456558 layout.worker.js.map
 444435 layout-sync.js
 492067 layout-sync.js.map
  18280 legacy-styles.js
  14262 legacy-styles.js.map
1661623 workspace.js
2896599 workspace.js.map

after

   1216 layout.worker.js
   2661 layout.worker.js.map
 162309 layout-sync.js
 578325 layout-sync.js.map
  11962 legacy-styles.js
  18112 legacy-styles.js.map
1026658 workspace.js
2024975 workspace.js.map

Some observations:

  • Build time on GitHub Actions now is ~30% (reduction by 70%) from the Webpack build.
  • Main bundle size (workspace.js) is ~62% (reduction by 38%) from the Webpack build.
    • When considering the library build only (without the examples), the difference even greater: 3s (vite) vs 15s (webpack), an 80% reduction!
  • layout.worker bundle no longer includes layout-sync inside itself and instead imports it as ES module, so the code is no longer duplicated when using both in the dependent app.

@AlexeyMz AlexeyMz force-pushed the replace-webpack-with-vite branch 2 times, most recently from e2f3f35 to 2af3d61 Compare November 7, 2025 22:55
* Remove all Webpack-related dev-dependencies;
* Add dev-dependency on `vite` and `vite-plugin-css-injected-by-js`;
* Move Vitest config into main Vite configuration;
* Use separate `tsconfig.node.json` for build scripts (e.g. Vite and Vitest configuration);
* Set `"type": "module"` in `package.json`;
* Enable `"isolatedModules": true` in tsconfig, fix missing `type` for re-exported types;
* Change examples to have separate HTML for each entry point with shared code for settings;
@AlexeyMz AlexeyMz force-pushed the replace-webpack-with-vite branch from 2af3d61 to e655a57 Compare November 8, 2025 13:45
@AlexeyMz AlexeyMz merged commit e9ab6db into master Nov 8, 2025
4 checks passed
@AlexeyMz AlexeyMz deleted the replace-webpack-with-vite branch November 8, 2025 15:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant