Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: implement custom routes #1447

Merged
merged 42 commits into from
Feb 3, 2024
Merged

perf: implement custom routes #1447

merged 42 commits into from
Feb 3, 2024

Conversation

Mister-Hope
Copy link
Member

@Mister-Hope Mister-Hope commented Dec 4, 2023

Description

This pr reduces output size and improves performance at the same time.

Including:

merging page data and component into 1 chunk

Usually page data chunk is small (<1kb), and with shouldPreload shouldPrefetch and HTTP1.1, it will affect network. Merging them to 1 chunk almost reduce half of the chunk amount. And do not have negetive influencea as they are always fetch together.

avoid heavy operation with router.resolve

  • router.resolve performs RegExp.exec() when mapping the whole routes array to find a matched result.

    To solve this, we introduce:

    • virtual routes
    • hasPage (repalcement of detecting whether a route exisits)
    • getPagePaths (replacement of routes.getRoutes)
  • To align route changes with pageData, we exec page component and page data fetching in beforeResolve hook, which means every router.resolve (so is <RouterLink>) actually fetchs that page component and data and parse them.

    To solve this, we introduce:

    • <VPLink> component which is "light"
    • resolve helper (replacement of router.resolve to get path and meta data)

Removing duplicated route records with redirects and maps holding data, components

Now a single map holds all pages info and pageKey and a redirection map are used at client:

  • pagesMap: holds page path and its data, component and meta
  • redirectsMap: holds redirects

Breaking changes

  • pageKey is removed at client, so operations like router.push(pageKey) router.resolve(pageKey) no longer work

  • routeMeta is renamed to meta

    We want to decouple meta concept with router

    routeMeta is deprecated but still supported for backwards compatibility, we should remove the support in stable.

  • dataFileChunkName dataFilePath and dataFilePathRelative are renamed to chunkName chunkFilePath and chunkFilePathRelative

New Recommendations

  • People should use resolve in @vuepress/client to get page meta

    Getting page meta with router.resolve is deprecated but still supported for backwards compatibility, we should remove the support in stable. (We can support this for sure, but I think that decouple meta with routes could be better)

    Note: Calling router.resolve to get a correct page path is still supported as this is a correct usage. (but since it's heavy, maybe we should warn users to use resolve as first choice)

  • People should use <VPLink> as first choice then <RouterLink>

    • Links in markdown pages only needs a correct href, ranther then activate status.
    • Links in navbar and sidebar needs a customized active state

    In these cases, they should use <VPLink> as the cost of it is 90% less than <RouterLink>

Other notes

To support clean url (e.g.: navigating to /a/b and resolve /a/b.html to /a/b), we improved generation of htmlRelativePath and htmlPath on Page object

Benchmark

Ci result while finishing official docs page-render stage:

Before(main) After
2.5-3.9s 1.4-2.8s

Local test result with a 1 million words project https://innenu.com/:

Before(main) After
186.22s 108.11s

RFC

BTW, if we drop markdown link support, we can have higher performance.

I would upvote to drop support for markdown links, since we already convert every markdown link in markdown files to <VPLink> with .html suffix.

What do you think if we add a router field in config files with options like:

router: {
  cleanUrl: true,
  resolveMarkdownLink: true,
  // ...
}

@coveralls
Copy link

coveralls commented Jan 24, 2024

Pull Request Test Coverage Report for Build 7766614992

  • -80 of 101 (20.79%) changed or added relevant lines in 24 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage decreased (-0.4%) to 40.382%

Changes Missing Coverage Covered Lines Changed/Added Lines %
packages/bundler-vite/src/build/resolvePageChunkFiles.ts 0 1 0.0%
packages/cli/src/commands/dev/handlePageUnlink.ts 0 1 0.0%
packages/client/src/composables/siteData.ts 0 1 0.0%
packages/client/src/setupGlobalComponents.ts 0 1 0.0%
packages/cli/src/commands/dev/handlePageAdd.ts 0 2 0.0%
packages/cli/src/commands/dev/handlePageChange.ts 0 2 0.0%
packages/client/src/composables/routes.ts 0 2 0.0%
packages/core/src/app/appPrepare.ts 0 2 0.0%
packages/core/src/app/prepare/preparePageChunk.ts 1 3 33.33%
packages/client/src/router/resolveRoute.ts 0 4 0.0%
Totals Coverage Status
Change from base Build 7670827817: -0.4%
Covered Lines: 675
Relevant Lines: 1716

💛 - Coveralls

@meteorlxy
Copy link
Member

meteorlxy commented Feb 2, 2024

perf: implement custom routes

BREAKING CHANGE: vue-router's route records have been replaced by custom route records to get better performance. It should not break common usage, but could be a potential breaking change for some themes. vue-router is suitable for SPAs, but not for static sites. It has a negative impact on the performance of vuepress sites, especially large-scale ones. In the long run we'll replace vue-router with a light-weighted custom router totally, but we'll try to keep the compatibility for sure.

@Mister-Hope
Copy link
Member Author

LGTM

@meteorlxy meteorlxy changed the title feat: introduce VPLink and virtual routes perf: implement custom routes Feb 3, 2024
@Mister-Hope
Copy link
Member Author

LGTM

@meteorlxy meteorlxy merged commit 7d37350 into main Feb 3, 2024
31 of 33 checks passed
@meteorlxy meteorlxy deleted the new-router branch February 3, 2024 12:30
meteorlxy added a commit that referenced this pull request Feb 3, 2024
BREAKING CHANGE: vue-router's route records have been replaced by custom route records to get better performance. It should not break common usage, but could be a potential breaking change for some themes. vue-router is suitable for SPAs, but not for static sites. It has a negative impact on the performance of vuepress sites, especially large-scale ones. In the long run we'll replace vue-router with a light-weighted custom router totally.

--------

Co-authored-by: Xinyu Liu <meteor.lxy@foxmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants