feat: code splitting

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+stats.html
 .DS_Store
 dist
 dist-ssr

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

package.json

@@ -9,8 +9,6 @@
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
     "@chakra-ui/icons": "^1.0.15",
     "@chakra-ui/react": "^1.0.0",
     "@emotion/react": "^11.0.0",
@@ -22,24 +20,27 @@
     "mobx": "^6.3.2",
     "mobx-react": "^7.2.0",
     "qs": "^6.10.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-error-boundary": "^3.1.3",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.12.2",
     "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
     "validator": "^13.6.0",
     "yup": "^0.32.9"
   },
   "devDependencies": {
+    "@types/js-cookie": "^2.2.7",
+    "@types/node": "^16.11.0",
+    "@types/qs": "^6.9.7",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@types/js-cookie": "^2.2.7",
-    "@types/qs": "^6.9.7",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
     "@types/validator": "^13.6.3",
     "@vitejs/plugin-react": "^1.0.0",
+    "rollup-plugin-visualizer": "^5.5.2",
     "typescript": "^4.3.2",
     "vite": "^2.6.4"
   }

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.tsx

@@ -20,13 +20,13 @@ import PublicRoute from '@educt/components/PublicRoute';
 /**
  * Pages
  */
-import MainPage from '@educt/pages/main';
-import CoursesPage from '@educt/pages/courses';
-import MessagesPage from '@educt/pages/messages';
-import ProfilePage from '@educt/pages/profile';
-import UsersPage from '@educt/pages/users';
 import AuthPage from '@educt/pages/auth';
 import NotFoundPage from '@educt/pages/404';
+const CoursesPage = React.lazy(() => import('@educt/pages/courses'));
+const MainPage = React.lazy(() => import('@educt/pages/main'));
+const MessagesPage = React.lazy(() => import('@educt/pages/messages'));
+const ProfilePage = React.lazy(() => import('@educt/pages/profile'));
+const UsersPage = React.lazy(() => import('@educt/pages/users'));
 
 const App = () => {
   const {

src/components/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { Redirect } from 'react-router';
 import { useErrorHandler } from 'react-error-boundary';
@@ -58,6 +58,7 @@ const Layout: React.FC<LayoutPropsType> = ({ children, roles }) => {
             },
           }}
         >
+          <Suspense fallback={<LoadingPage />}>
             {(() => {
               /**
                * Check user roles if defined "roles" prop in
@@ -80,6 +81,7 @@ const Layout: React.FC<LayoutPropsType> = ({ children, roles }) => {
                 return children;
               }
             })()}
+          </Suspense>
         </Box>
       </Flex>
     </>

src/stores/CategoryStore.ts

@@ -39,7 +39,6 @@ export default class CategoryStore {
     try {
       this.setLoading(true);
       const result = await this.categoryService.fetchAll();
-      console.log(`[${this.constructor.name}]: ${result.message}`, result);
 
       runInAction(() => {
         this.categories = result.data;

src/stores/CourseStore.ts

@@ -40,7 +40,6 @@ export default class CourseStore {
     try {
       this.setLoading(true);
       const result = await this.courseService.fetchAll(params);
-      console.log(`[${this.constructor.name}]: ${result.message}`, result);
 
       runInAction(() => {
         this.courses = result.data;

src/stores/UserStore.ts

@@ -39,7 +39,6 @@ export default class UserStore {
   public async loadUsersData(params?: FetchUsersParamsType) {
     try {
       const result = await this.userService.fetchAll(params);
-      console.log(`[${this.constructor.name}]: ${result.message}`, result);
 
       runInAction(() => {
         this.users = result.data;
@@ -59,8 +58,6 @@ export default class UserStore {
         data: { id, first_name, last_name, email, roles, contacts, courses },
       } = result;
 
-      console.log(`[${this.constructor.name}]: ${result.message}`, result);
-
       runInAction(() => {
         this.me = {
           id,

tsconfig.json

@@ -20,5 +20,7 @@
     "paths": {
       "@educt/*": ["src/*"]
     }
-  }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
 }

vite.config.ts

@@ -1,15 +1,36 @@
 import { defineConfig } from 'vite';
 import path from 'path';
 import react from '@vitejs/plugin-react';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { dependencies } from './package.json';
+
+function renderChunks(deps: Record<string, string>) {
+  let chunks = {};
+  Object.keys(deps).forEach(key => {
+    if (['@chakra-ui/react', '@chakra-ui/icons', 'framer-motion'].includes(key)) chunks[key] = [key];
+    return;
+  });
+  return chunks;
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  root: './',
+  publicDir: 'public',
   plugins: [react()],
   resolve: {
     alias: [{ find: '@educt', replacement: path.resolve(__dirname, 'src') }],
   },
   build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          ...renderChunks(dependencies),
+        },
+      },
+      plugins: [visualizer()],
+    },
     outDir: 'dist',
-    sourcemap: true,
+    sourcemap: false,
   },
 });