![]() Comparing two components - is Component X an instance of Component A.How to call a component function on other component, but from the other component ? React.using source-map-explorer), look for the big guys and double-check your imports. So, here is my advice for anybody who like me starts believing that tree-shaking doesn’t work, just because the bundle is ridiculously large: Double-check your bundle analysis report (i.e. ![]() I resolved the first issue by dynamically importing each icon when needed and the second issue by reducing the MAX_INLINE_FILE_SIZE_KB parameter for rollup-plugin-url in order to split out the font and have it loaded as an asset. The Theme component inlined a font as a base-64 string into the bundle.The Icon component imported all icons so that all svg files ended up in the bundle as soon as you used at least one icon or a component that uses an icon.Turns out tree shaking worked all the time! Here is what was “wrong” with the library: That seems to work so far, though it’s again not tree-shaking and I would still like to know how to make my component library tree-shakable. (bundler configuration of the React component library) import babel from 'rollup-plugin-babel' import commonjs from 'rollup-plugin-commonjs' import autoExternal from 'rollup-plugin-auto-external' import resolve from 'rollup-plugin-node-resolve' import reactSvg from 'rollup-plugin-react-svg' import url from 'rollup-plugin-url' import string from 'rollup-plugin-string' import pureanno from 'rollup-plugin-pure-annotation' import pkg from './package.json' const from 'my-react-component-library' Why is tree-shaking not working? What am I doing wrong? After building the app bundle and analyzing it I see that the library has either not been tree-shaken at all or that tree-shaking didn’t work on the library because it is not tree-shakable in the first place. ![]() I expect Webpack to tree-shake the component library. Then I’m consuming that library in an app setup with create-react-app which uses Webpack under the hood. I have a React component library that I’m bundling with rollup. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2023
Categories |