LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

CodeSplit: Consolidate "secondary" chunk.

Browse source 
These are chunks that will be requested immediately after ui.js when opening the homepage, so consolidate them into 1 chunk to reduce network overhead.

More work can/should be done to reduce the secondary chunk.
This commit is contained in:
infinite-persistence 2021-06-14 19:58:33 +08:00
parent 3539031e5a
commit 60afbaf873
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
5 changed files with 76 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ui/component/app/view.jsx
View file

@ -30,21 +30,22 @@ import {
// @endif // @endif
import LANGUAGE_MIGRATIONS from 'constants/language-migrations'; import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
const FileDrop = React.lazy(() => import('component/fileDrop' /* webpackChunkName: "fileDrop" */)); const FileDrop = React.lazy(() => import('component/fileDrop' /* webpackChunkName: "secondary" */));
const ModalRouter = React.lazy(() => import('modal/modalRouter' /* webpackChunkName: "modalRouter" */)); const ModalRouter = React.lazy(() => import('modal/modalRouter' /* webpackChunkName: "secondary" */));
const Nag = React.lazy(() => import('component/common/nag' /* webpackChunkName: "nag" */)); const Nag = React.lazy(() => import('component/common/nag' /* webpackChunkName: "secondary" */));
const NagContinueFirstRun = React.lazy(() => import('component/nagContinueFirstRun' /* webpackChunkName: "nagContinueFirstRun" */)); const NagContinueFirstRun = React.lazy(() => import('component/nagContinueFirstRun' /* webpackChunkName: "secondary" */));
const OpenInAppLink = React.lazy(() => import('web/component/openInAppLink' /* webpackChunkName: "openInAppLink" */)); const OpenInAppLink = React.lazy(() => import('web/component/openInAppLink' /* webpackChunkName: "secondary" */));
const SyncFatalError = React.lazy(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */));
const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
// @if TARGET='web' // @if TARGET='web'
const NagDataCollection = React.lazy(() => import('web/component/nag-data-collection' /* webpackChunkName: "nag-data-collection" */)); const NagDataCollection = React.lazy(() => import('web/component/nag-data-collection' /* webpackChunkName: "secondary" */));
const NagDegradedPerformance = React.lazy(() => import('web/component/nag-degraded-performance' /* webpackChunkName: "nag-degraded-performance" */)); const NagDegradedPerformance = React.lazy(() => import('web/component/nag-degraded-performance' /* webpackChunkName: "secondary" */));
const NagNoUser = React.lazy(() => import('web/component/nag-no-user' /* webpackChunkName: "nag-no-user" */)); const NagNoUser = React.lazy(() => import('web/component/nag-no-user' /* webpackChunkName: "nag-no-user" */));
const YoutubeWelcome = React.lazy(() => import('web/component/youtubeReferralWelcome' /* webpackChunkName: "youtubeReferralWelcome" */)); const YoutubeWelcome = React.lazy(() => import('web/component/youtubeReferralWelcome' /* webpackChunkName: "secondary" */));
// @endif // @endif
const SyncFatalError = React.lazy(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */));
const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
// **************************************************************************** // ****************************************************************************
export const MAIN_WRAPPER_CLASS = 'main-wrapper'; export const MAIN_WRAPPER_CLASS = 'main-wrapper';
@ -385,11 +386,11 @@ function App(props: Props) {
if (syncFatalError) { if (syncFatalError) {
return ( return (
<React.Suspense fallback={null}> <React.Suspense fallback={null}>
<SyncFatalError <SyncFatalError
// @if TARGET='web' // @if TARGET='web'
lbryTvApiStatus={lbryTvApiStatus} lbryTvApiStatus={lbryTvApiStatus}
// @endif // @endif
/> />
</React.Suspense> </React.Suspense>
); );
} }
@ -407,11 +408,11 @@ function App(props: Props) {
> >
{IS_WEB && lbryTvApiStatus === STATUS_DOWN ? ( {IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
<React.Suspense fallback={null}> <React.Suspense fallback={null}>
<Yrbl <Yrbl
className="main--empty" className="main--empty"
title={__('lbry.tv is currently down')} title={__('lbry.tv is currently down')}
subtitle={__('My wheel broke, but the good news is that someone from LBRY is working on it.')} subtitle={__('My wheel broke, but the good news is that someone from LBRY is working on it.')}
/> />
</React.Suspense> </React.Suspense>
) : ( ) : (
<React.Fragment> <React.Fragment>

16
ui/component/fileRender/view.jsx
View file

@ -16,17 +16,11 @@ import ComicBookViewer from 'component/viewers/comicBookViewer';
import ThreeViewer from 'component/viewers/threeViewer'; import ThreeViewer from 'component/viewers/threeViewer';
// @endif // @endif
const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpackChunkName: "viewers/appViewer" */)); const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpackChunkName: "appViewer" */));
const HtmlViewer = React.lazy(() => const HtmlViewer = React.lazy(() => import('component/viewers/htmlViewer' /* webpackChunkName: "htmlViewer" */));
import('component/viewers/htmlViewer' /* webpackChunkName: "viewers/htmlViewer" */) const ImageViewer = React.lazy(() => import('component/viewers/imageViewer' /* webpackChunkName: "imageViewer" */));
); const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "pdfViewer" */));
const ImageViewer = React.lazy(() => const VideoViewer = React.lazy(() => import('component/viewers/videoViewer' /* webpackChunkName: "videoViewer" */));
import('component/viewers/imageViewer' /* webpackChunkName: "viewers/imageViewer" */)
);
const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "viewers/pdfViewer" */));
const VideoViewer = React.lazy(() =>
import('component/viewers/videoViewer' /* webpackChunkName: "viewers/videoViewer" */)
);
type Props = { type Props = {
uri: string, uri: string,

2
ui/component/page/view.jsx
View file

@ -12,7 +12,7 @@ import { useHistory } from 'react-router';
import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize'; import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
const Footer = React.lazy(() => import('web/component/footer' /* webpackChunkName: "component/footer" */)); const Footer = React.lazy(() => import('web/component/footer' /* webpackChunkName: "secondary" */));
export const MAIN_CLASS = 'main'; export const MAIN_CLASS = 'main';
type Props = { type Props = {

98
ui/component/router/view.jsx
View file

@ -13,65 +13,63 @@ import HomePage from 'page/home';
const BackupPage = React.lazy(() => import('page/backup' /* webpackChunkName: "backup" */)); const BackupPage = React.lazy(() => import('page/backup' /* webpackChunkName: "backup" */));
// @endif // @endif
// @if TARGET='web' // @if TARGET='web'
const Code2257Page = React.lazy(() => import('web/page/code2257')); const Code2257Page = React.lazy(() => import('web/page/code2257'));
// @endif // @endif
// Chunk: "authenticate" // Chunk: "secondary"
const SignInPage = React.lazy(() => import('page/signIn' /* webpackChunkName: "authenticate" */)); const SignInPage = React.lazy(() => import('page/signIn' /* webpackChunkName: "secondary" */));
const SignInWalletPasswordPage = React.lazy(() => const SignInWalletPasswordPage = React.lazy(() => import('page/signInWalletPassword' /* webpackChunkName: "secondary" */));
import('page/signInWalletPassword' /* webpackChunkName: "authenticate" */) const SignUpPage = React.lazy(() => import('page/signUp' /* webpackChunkName: "secondary" */));
); const SignInVerifyPage = React.lazy(() => import('page/signInVerify' /* webpackChunkName: "secondary" */));
const SignUpPage = React.lazy(() => import('page/signUp' /* webpackChunkName: "authenticate" */));
const SignInVerifyPage = React.lazy(() => import('page/signInVerify' /* webpackChunkName: "authenticate" */));
// Chunk: "wallet" // Chunk: "wallet/secondary"
const BuyPage = React.lazy(() => import('page/buy' /* webpackChunkName: "wallet" */)); const BuyPage = React.lazy(() => import('page/buy' /* webpackChunkName: "secondary" */));
const ReceivePage = React.lazy(() => import('page/receive' /* webpackChunkName: "wallet" */)); const ReceivePage = React.lazy(() => import('page/receive' /* webpackChunkName: "secondary" */));
const SendPage = React.lazy(() => import('page/send' /* webpackChunkName: "wallet" */)); const SendPage = React.lazy(() => import('page/send' /* webpackChunkName: "secondary" */));
const SwapPage = React.lazy(() => import('page/swap' /* webpackChunkName: "wallet" */)); const SwapPage = React.lazy(() => import('page/swap' /* webpackChunkName: "secondary" */));
const WalletPage = React.lazy(() => import('page/wallet' /* webpackChunkName: "wallet" */)); const WalletPage = React.lazy(() => import('page/wallet' /* webpackChunkName: "secondary" */));
// Chunk: none // Chunk: none
const NotificationsPage = React.lazy(() => import('page/notifications' /* webpackChunkName: "notifications" */)); const NotificationsPage = React.lazy(() => import('page/notifications' /* webpackChunkName: "secondary" */));
const CollectionPage = React.lazy(() => import('page/collection' /* webpackChunkName: "collection" */)); const CollectionPage = React.lazy(() => import('page/collection' /* webpackChunkName: "secondary" */));
const ChannelNew = React.lazy(() => import('page/channelNew' /* webpackChunkName: "channelNew" */)); const ChannelNew = React.lazy(() => import('page/channelNew' /* webpackChunkName: "secondary" */));
const ChannelsFollowingDiscoverPage = React.lazy(() => import('page/channelsFollowingDiscover' /* webpackChunkName: "channelsFollowingDiscover" */)); const ChannelsFollowingDiscoverPage = React.lazy(() => import('page/channelsFollowingDiscover' /* webpackChunkName: "secondary" */));
const ChannelsFollowingPage = React.lazy(() => import('page/channelsFollowing' /* webpackChunkName: "channelsFollowing" */)); const ChannelsFollowingPage = React.lazy(() => import('page/channelsFollowing' /* webpackChunkName: "secondary" */));
const ChannelsPage = React.lazy(() => import('page/channels' /* webpackChunkName: "channels" */)); const ChannelsPage = React.lazy(() => import('page/channels' /* webpackChunkName: "secondary" */));
const CheckoutPage = React.lazy(() => import('page/checkoutPage' /* webpackChunkName: "checkoutPage" */)); const CheckoutPage = React.lazy(() => import('page/checkoutPage' /* webpackChunkName: "checkoutPage" */));
const CreatorDashboard = React.lazy(() => import('page/creatorDashboard' /* webpackChunkName: "creatorDashboard" */)); const CreatorDashboard = React.lazy(() => import('page/creatorDashboard' /* webpackChunkName: "secondary" */));
const DiscoverPage = React.lazy(() => import('page/discover' /* webpackChunkName: "discover" */)); const DiscoverPage = React.lazy(() => import('page/discover' /* webpackChunkName: "secondary" */));
const EmbedWrapperPage = React.lazy(() => import('page/embedWrapper' /* webpackChunkName: "embedWrapper" */)); const EmbedWrapperPage = React.lazy(() => import('page/embedWrapper' /* webpackChunkName: "secondary" */));
const FileListPublished = React.lazy(() => import('page/fileListPublished' /* webpackChunkName: "fileListPublished" */)); const FileListPublished = React.lazy(() => import('page/fileListPublished' /* webpackChunkName: "secondary" */));
const FourOhFourPage = React.lazy(() => import('page/fourOhFour' /* webpackChunkName: "fourOhFour" */)); const FourOhFourPage = React.lazy(() => import('page/fourOhFour' /* webpackChunkName: "fourOhFour" */));
const HelpPage = React.lazy(() => import('page/help' /* webpackChunkName: "help" */)); const HelpPage = React.lazy(() => import('page/help' /* webpackChunkName: "help" */));
const InvitePage = React.lazy(() => import('page/invite' /* webpackChunkName: "invite" */)); const InvitePage = React.lazy(() => import('page/invite' /* webpackChunkName: "secondary" */));
const InvitedPage = React.lazy(() => import('page/invited' /* webpackChunkName: "invited" */)); const InvitedPage = React.lazy(() => import('page/invited' /* webpackChunkName: "secondary" */));
const LibraryPage = React.lazy(() => import('page/library' /* webpackChunkName: "library" */)); const LibraryPage = React.lazy(() => import('page/library' /* webpackChunkName: "secondary" */));
const ListBlockedPage = React.lazy(() => import('page/listBlocked' /* webpackChunkName: "listBlocked" */)); const ListBlockedPage = React.lazy(() => import('page/listBlocked' /* webpackChunkName: "secondary" */));
const ListsPage = React.lazy(() => import('page/lists' /* webpackChunkName: "lists" */)); const ListsPage = React.lazy(() => import('page/lists' /* webpackChunkName: "secondary" */));
const LiveStreamSetupPage = React.lazy(() => import('page/livestreamSetup' /* webpackChunkName: "livestreamSetup" */)); const LiveStreamSetupPage = React.lazy(() => import('page/livestreamSetup' /* webpackChunkName: "secondary" */));
const LivestreamCurrentPage = React.lazy(() => import('page/livestreamCurrent' /* webpackChunkName: "livestreamCurrent" */)); const LivestreamCurrentPage = React.lazy(() => import('page/livestreamCurrent' /* webpackChunkName: "secondary" */));
const PasswordResetPage = React.lazy(() => import('page/passwordReset' /* webpackChunkName: "passwordReset" */)); const PasswordResetPage = React.lazy(() => import('page/passwordReset' /* webpackChunkName: "secondary" */));
const PasswordSetPage = React.lazy(() => import('page/passwordSet' /* webpackChunkName: "passwordSet" */)); const PasswordSetPage = React.lazy(() => import('page/passwordSet' /* webpackChunkName: "secondary" */));
const PublishPage = React.lazy(() => import('page/publish' /* webpackChunkName: "publish" */)); const PublishPage = React.lazy(() => import('page/publish' /* webpackChunkName: "secondary" */));
const ReportContentPage = React.lazy(() => import('page/reportContent' /* webpackChunkName: "reportContent" */)); const ReportContentPage = React.lazy(() => import('page/reportContent' /* webpackChunkName: "secondary" */));
const ReportPage = React.lazy(() => import('page/report' /* webpackChunkName: "report" */)); const ReportPage = React.lazy(() => import('page/report' /* webpackChunkName: "secondary" */));
const RepostNew = React.lazy(() => import('page/repost' /* webpackChunkName: "repost" */)); const RepostNew = React.lazy(() => import('page/repost' /* webpackChunkName: "secondary" */));
const RewardsPage = React.lazy(() => import('page/rewards' /* webpackChunkName: "rewards" */)); const RewardsPage = React.lazy(() => import('page/rewards' /* webpackChunkName: "secondary" */));
const RewardsVerifyPage = React.lazy(() => import('page/rewardsVerify' /* webpackChunkName: "rewardsVerify" */)); const RewardsVerifyPage = React.lazy(() => import('page/rewardsVerify' /* webpackChunkName: "secondary" */));
const SearchPage = React.lazy(() => import('page/search' /* webpackChunkName: "search" */)); const SearchPage = React.lazy(() => import('page/search' /* webpackChunkName: "secondary" */));
const SettingsAdvancedPage = React.lazy(() => import('page/settingsAdvanced' /* webpackChunkName: "settingsAdvanced" */)); const SettingsAdvancedPage = React.lazy(() => import('page/settingsAdvanced' /* webpackChunkName: "secondary" */));
const SettingsCreatorPage = React.lazy(() => import('page/settingsCreator' /* webpackChunkName: "settingsCreator" */)); const SettingsCreatorPage = React.lazy(() => import('page/settingsCreator' /* webpackChunkName: "secondary" */));
const SettingsNotificationsPage = React.lazy(() => import('page/settingsNotifications' /* webpackChunkName: "settingsNotifications" */)); const SettingsNotificationsPage = React.lazy(() => import('page/settingsNotifications' /* webpackChunkName: "secondary" */));
const SettingsPage = React.lazy(() => import('page/settings' /* webpackChunkName: "settings" */)); const SettingsPage = React.lazy(() => import('page/settings' /* webpackChunkName: "secondary" */));
const ShowPage = React.lazy(() => import('page/show' /* webpackChunkName: "show" */)); const ShowPage = React.lazy(() => import('page/show' /* webpackChunkName: "secondary" */));
const TagsFollowingManagePage = React.lazy(() => import('page/tagsFollowingManage' /* webpackChunkName: "tagsFollowingManage" */)); const TagsFollowingManagePage = React.lazy(() => import('page/tagsFollowingManage' /* webpackChunkName: "secondary" */));
const TagsFollowingPage = React.lazy(() => import('page/tagsFollowing' /* webpackChunkName: "tagsFollowing" */)); const TagsFollowingPage = React.lazy(() => import('page/tagsFollowing' /* webpackChunkName: "secondary" */));
const TopPage = React.lazy(() => import('page/top' /* webpackChunkName: "top" */)); const TopPage = React.lazy(() => import('page/top' /* webpackChunkName: "secondary" */));
const Welcome = React.lazy(() => import('page/welcome' /* webpackChunkName: "welcome" */)); const Welcome = React.lazy(() => import('page/welcome' /* webpackChunkName: "secondary" */));
const YoutubeSyncPage = React.lazy(() => import('page/youtubeSync' /* webpackChunkName: "youtubeSync" */)); const YoutubeSyncPage = React.lazy(() => import('page/youtubeSync' /* webpackChunkName: "secondary" */));
// Tell the browser we are handling scroll restoration // Tell the browser we are handling scroll restoration
if ('scrollRestoration' in history) { if ('scrollRestoration' in history) {

2
ui/component/wunderbar/view.jsx
View file

@ -5,7 +5,7 @@ import { useIsMobile } from 'effects/use-screensize';
const Button = React.lazy(() => import('component/button' /* webpackChunkName: "button" */)); const Button = React.lazy(() => import('component/button' /* webpackChunkName: "button" */));
const Icon = React.lazy(() => import('component/common/icon' /* webpackChunkName: "icon" */)); const Icon = React.lazy(() => import('component/common/icon' /* webpackChunkName: "icon" */));
const WunderbarSuggestions = React.lazy(() => import('component/wunderbarSuggestions' /* webpackChunkName: "wunderbarSuggestions" */)); const WunderbarSuggestions = React.lazy(() => import('component/wunderbarSuggestions' /* webpackChunkName: "secondary" */));
type Props = { type Props = {
doOpenMobileSearch: (any) => void, doOpenMobileSearch: (any) => void,