I've got a Webpack config that successfully enables tree-shaking. However, I find it incredibly frustrating that regardless if I import react-dom as a default export or only render — the only function I need — it's the size in the final bundle is the same according to Webpack-bundle-analyzer
. A whopping 114kb. Webpack has a recommended bundle size of 244kb, so simply using React-DOM takes up nearly half of that space. Why is this? And is there any way around it?
import { render } from "react-dom";
// or
import ReactDOM from "react-dom";
// both give same 114kb output in final bundle :(
Tree shaking only works if some of the code is not utilised and can be safely removed. React-DOM unfortunately pretty much uses all of the code it exports, and there's a lot of it.
I would recommend looking in to Preact ( https://preactjs.com/ ), an alternative implementation of React. The Preact core is 3kb and almost fully compatible with React, and for full compatibility the preact-compat
addon is also available.
It's far smaller and faster, so it's a win-win.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.