adverse-sapphire•11mo ago

tutorial is very slow to load

Hi, I'm newbie and trying to learn refine.(attracted by the rich features), but the first problem I encounter is that the loading process takes too long, about 10 minutes, is that normal? or what I did wrong? ✔ Downloaded remote source successfully. ✔ What would you like to name your project?: · tutorial ✔ Choose your backend service to connect: · data-provider-custom-json-rest ✔ Do you want to use a UI Framework?: · mui ✔ Do you want to add example pages?: · no ✔ Do you need any Authentication logic?: · none ✔ Do you need i18n (Internationalization) support?: · no ✔ Choose a package manager: · npm ✔ Mind sharing your email? (We reach out to developers for free priority support, events, and SWAG kits. We never spam.) · yes Success! Created tutorial at /Users/front/learn/tutorial

16 Replies

kapa.ai•11mo ago

Hi @seki0183. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The loading process for setting up a new refine project should not take as long as 10 minutes. As per the installation guide (https://refine.dev/blog/react-admin-frameworks-refine-vs-blitz-js/), the installation process should not take more than a minute. If it's taking longer, it could be due to a slow internet connection or issues with your local development environment. Here are a few things you can check: 1. Make sure you have a stable internet connection. 2. Ensure that your Node.js and npm versions are up to date. 3. Check if there's enough disk space on your machine. 4. Try to close other heavy applications that might be slowing down your machine. If the problem persists, you might want to try using refine.new (https://refine.dev/blog/what-is-refine-new/), a browser-based tool for creating refine apps. It allows you to create a new refine application in just 15 seconds. After making your selections, you can download the complete project code and use it as a starting point for your project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

adverse-sapphire•11mo ago

Another question is, when use antd, after npm run build, the bundled js size is more than 4MB, I think it's too big, is there any way to make it thiner @kapa.ai

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @seki0183, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

adverse-sapphire•11mo ago

Another question is, when use antd, after npm run build, the bundled js size is more than 4MB, I think it's too big, is there any way to make it thiner @kapa.ai

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, there are ways to optimize the bundle size of your refine application. One of the ways to reduce the bundle size is by using explicit imports. This is recommended in the refine documentation. Instead of importing the entire library, you can import only the components you need. This can significantly reduce the bundle size. Here's an example:

// Instead of this
import { useTable, SaveButton, Button, Form, Input } from "@pankod/refine-antd";  

// Do this
import { useTable, SaveButton } from "@refinedev/antd";  
import { Button, Form, Input } from "antd";

// Instead of this
import { useTable, SaveButton, Button, Form, Input } from "@pankod/refine-antd";  

// Do this
import { useTable, SaveButton } from "@refinedev/antd";  
import { Button, Form, Input } from "antd";

Another way to reduce the bundle size is by removing re-exported packages. As mentioned in the refine v4 announcement (https://refine.dev/blog/refine-v4-announcement/), re-exporting can lead to issues with bundle size. Removing re-exported packages can help you achieve the same bundle size as a vanilla React project. Also, consider using tools like Webpack Bundle Analyzer (https://www.npmjs.com/package/webpack-bundle-analyzer) to visualize the size of webpack output files. It will help you understand what's contributing to the size of your bundle and where you can make optimizations. Lastly, remember that the size of the production bundle will be smaller than the development bundle because it will be minified and optimized for performance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

adverse-sapphire•11mo ago

@kapa.ai why it take a little long to wait to next stage after seeing "✔ Mind sharing your email? (We reach out to developers for free priority support, events, and SWAG kits. We never spam.) · yes"

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The delay you're experiencing after the "Mind sharing your email?" step could be due to a number of factors. It's important to note that this step is part of the setup process where the CLI is configuring your project based on the options you've selected. This involves creating the project directory, installing the necessary dependencies, and setting up the project structure. Here are a few possible reasons for the delay: 1. Network Speed: If your internet connection is slow, it might take some time to download and install the necessary packages for your project. 2. System Performance: If your system is under heavy load or doesn't have much available memory, it might take longer to complete the setup process. 3. NPM or Yarn Performance: Sometimes, the package managers (npm or yarn) might be slow due to various reasons like a slow network, a large number of dependencies, etc. If the delay is significantly long, you might want to check your internet connection and system performance. Also, make sure you're using the latest versions of Node.js and npm/yarn. However, as per the installation guide (https://refine.dev/blog/react-admin-frameworks-refine-vs-blitz-js/), the installation process should not take more than a minute. If it's taking significantly longer, it might be worth reaching out to the refine community or support for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

optimistic-gold•11mo ago

Hello @seki0183 we've just released a version with possible fix to long waiting time, could you try again and let us know?

adverse-sapphire•11mo ago

okay, just retry the same process, right?

optimistic-gold•11mo ago

Yeah, with latest version

adverse-sapphire•11mo ago

it seems much faster before installing, but installing process takes a little while. totally, it perforces much better. after run "npm run build", it generates main.js with 1.5MB, is this size normal? @batuhanw

optimistic-gold•11mo ago

Hey @seki0183 Bundle size shouldnt be specific to refine. You can check for ways to optimize bundle size like using lazy load and treeshaking, removing unused imports etc. Bot also has relevant answer before.

adverse-sapphire•11mo ago

Thanks for your reply, I will try.