eastern-cyan•11mo ago

Optimizing for production

Hi peepz, I was wondering are there any best practices apart from vite to optimize the bundle for production? When analyzing my bundle there are two big libraries that come with refine: - lodash - parser-typescript (is this even needed apart from the interferer?) Any tips are more then welcome. We use Typescript + react + refine + antdesign

3 Replies

kapa.ai•11mo ago

Hi @thejorge4666. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello, Refine has taken steps to optimize the bundle size for production. One of the significant changes made in refine v4 was the removal of re-exported packages. This change was made in response to community feedback and the increasing importance of bundle size for React-based frameworks like refine. Removing re-exported packages allows you to achieve the same bundle size as a vanilla React project. For example, the @refinedev/antd and package exports have been removed and updated as described in the migration guide. Here's an example of how the imports have been updated:

- import { useTable, SaveButton, Button, Form, Input } from "@pankod/refine-antd";  
  
+ import { useTable, SaveButton } from "@refinedev/antd";  
+ import { Button, Form, Input } from "antd";

- import { useTable, SaveButton, Button, Form, Input } from "@pankod/refine-antd";  
  
+ import { useTable, SaveButton } from "@refinedev/antd";  
+ import { Button, Form, Input } from "antd";

The packages affected by this change include @refinedev/antd, @refinedev/mui, @refinedev/chakra-ui, @refinedev/mantine, @refinedev/react-hook-form, and @refinedev/react-table. With full codemod support, imports and exports will be automatically updated when you migrate your refine project to v4. You can find more details on the migration guide (https://refine.dev/docs/migration-guide/3x-to-4x). As for the libraries you mentioned, lodash and parser-typescript, they are not specifically mentioned in the provided extracts. Therefore, I can't provide specific advice on optimizing them in the context of a refine project. However, generally, you might want to consider using tree shaking or selective imports to only include the parts of lodash that you actually use in your bundle. I hope this helps! If you have any more questions, feel free to ask. Source: Announcing the Release of refine v4! (https://refine.dev/blog/refine-v4-announcement/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@897927276304416769> kapa.ai is still learning and improving, please let us know how it did by reacting below

optimistic-gold•11mo ago

Hello @thejorge4666 great to see your progress! I think you can move parser-typescript dependency to devDependencies. And also you might be interested in this blog post: https://sambitsahoo.com/blog/vite-code-splitting-that-works.html

Vite code splitting that just works | Sambit Sahoo

Vite is an amazing tool that makes the DX while building apps a lot better. While vite brings pre-configured and optimized build setup with rollup, code-splitting isn't setup effectively. In this article we are going to discuss how to code-split vite powered apps effectively.