From d2d5629a36c63b3e423023ebae588bcb7d8911ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 16 Dec 2022 18:09:24 +0000 Subject: [PATCH] Feat lazy loading network (#2709) Adds lazy loading to the network routes, so we end up with smaller chunks in the build. Also adds a `start:prod` script that can prove useful to test the chunk loading behaviour locally. --- frontend/package.json | 1 + frontend/src/component/admin/network/Network.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index e0ddfdc031..e5e42872a1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "build": "vite build", "lint": "yarn fmt:check", "start": "vite", + "start:prod": "vite build && vite preview", "start:sandbox": "UNLEASH_API=https://sandbox.getunleash.io/ospro yarn run start", "start:enterprise": "UNLEASH_API=https://unleash4.herokuapp.com yarn run start", "start:demo": "UNLEASH_BASE_PATH=/demo/ yarn start", diff --git a/frontend/src/component/admin/network/Network.tsx b/frontend/src/component/admin/network/Network.tsx index 8ef4f71c07..56af659084 100644 --- a/frontend/src/component/admin/network/Network.tsx +++ b/frontend/src/component/admin/network/Network.tsx @@ -1,11 +1,13 @@ -import { NetworkOverview } from './NetworkOverview/NetworkOverview'; -import { NetworkTraffic } from './NetworkTraffic/NetworkTraffic'; +import { lazy } from 'react'; import AdminMenu from '../menu/AdminMenu'; import { styled, Tab, Tabs } from '@mui/material'; import { Route, Routes, useLocation } from 'react-router-dom'; import { CenteredNavLink } from '../menu/CenteredNavLink'; import { PageContent } from 'component/common/PageContent/PageContent'; +const NetworkOverview = lazy(() => import('./NetworkOverview/NetworkOverview')); +const NetworkTraffic = lazy(() => import('./NetworkTraffic/NetworkTraffic')); + const StyledPageContent = styled(PageContent)(() => ({ '.page-header': { padding: 0,