![]() That's not much really, but I'm a bundle size freak. Both of these combined weigh 129KB minified, and 42.4KB min+gzip. It needs to be paired up with react-dom, to actually render stuff on web. I didn't have to go and change every single import. Only difference is that its actually preact/compat underneath. And even now, they're importing from react. There are over 30+ files that import something from react. What benefits did I get out of this weird, eccentric wish to move a whole codebase from one framework to another? And this is how it all happened in less than 10 minutes. We are using TypeScript with React, and we have to tell it that the JSX factory and fragments are now different, so let's do that small change.Īnd BAM!! That's it. ![]() In this case, I'm pointing react to preact/compat, which is preact's compatibility layer to work with existing react apps. So the alias property accepts a key value pair. In this project, I'm using 15+ packages that import directly from React, and moving to preact would have broken them completely. ![]() ![]() Lastly, alias is the most, MOST important property here. In the plugins property, I have replaced reactRefresh with prefresh, and now our app supports HMR for preact. And during the production build, vite strips out unnecessary imports, so files not needing preact will end up with no preact at all. The jsxInject here is a very ✨magical✨ property, that automatically puts the statement passed to it in every single file, so it saves you the trouble of importing h from preact in every single file, or React for a react app. jsxFactory and jsxFragment are exactly what they look like. Vite is built on top this super fast ES module bundler esbuild, here we are passing some options to it. This is parts of my package.json file before the transfer:Įnter fullscreen mode Exit fullscreen mode Here's a brief breakdown of the whole process. And surprisingly, this whole moving took less than 10 minutes. I just made a new branch, and started fooling around. I treat this project as a playground of sorts and am constantly stirring things up in it. Then just a few days ago, I tried an experiment to move it to Preact. I started making it in React and Snowpack (Think of it as Webpack that does everything you want it do, without telling it anything) boilerplate, then around 2 weeks back, I moved it from Snowpack to Vite (Similar to Snowpack, just more refined and with more features.), and got some really cool features out of it. As you can see in the screenshot below, it looks like MacOS Big Sur, just running in the browser. I put 10 minutes in the title b'coz humans love multiples of 10 a lot □Īlright, so the app in question is a fun side project I'm working on, macOS Web, which is basically a MacOS Big Sur clone for Web(Don't tell Apple □). In case you are wondering if my claim of moving an app this big from one framework to other in just 10 minutes is true or just some clickbaity hoax, I assure you it isn't true. This post is just a recount of my experience when I moved a medium size React app(30+ components) to use Preact, in just 10 minutes. Heya you awesome dev!!Glad to see ya here □. When spreading props, use inline object with spread elements directly instead of Babel's extend helper or Object.assign. Will use the native built-in instead of trying to polyfill behavior for any plugins that require one. Replace the component used when compiling JSX fragments. React.createElement) or an identifier (e.g. Replace the function used when compiling JSX expressions. ![]() Replaces the import source when importing functions. pure Įnables It will mark top-level React method calls as pure for tree shaking. Though the JSX spec allows this, it is disabled by default since React's JSX does not currently have support for it. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |