Performance: fix compression issues by adjusting middleware matcher

[pettinarip]

Our current implementation has odd behavior when serving static files that are compressed. Depending on the browser, it will serve files using gzip or br, since the same browsers support both algorithms (same req header in all these browsers: Accept-Encoding: gzip, deflate, br, zstd).

We would like to always serve the br version as it is much lighter than the gzip version. For example, the _app.js bundle size drops from ~330kb to ~215kb when using Brotli.

The issue is related to the custom middleware we use to redirect requests to different locales. Currently, we process all incoming requests (which is not necessary) and for some reason this seems to cause a conflict with the netlify server which ends up serving gzip files instead.

Description

This PR adds a custom matcher to the exported middleware config to only process the matched paths and ignore the rest.

Summary by CodeRabbit

• New Features
  • Enhanced middleware to handle locales and redirects more effectively.
  • Introduced configuration to exclude specific paths from middleware processing.

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	f8fc217
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/664b4c8f99c6d500083b6484
😎 Deploy Preview	https://deploy-preview-12954--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 42 (🔴 down 14 from production) Accessibility: 92 (no change from production) Best Practices: 89 (🔴 down 9 from production) SEO: 93 (🔴 down 2 from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Page	Performance	Accessibility	Best practices	SEO	PWA
/en/	🔴 45	🟢 94	🟢 93	🟢 93	🔴 38
/en/wallets/find-wallet/	🟠 54	🟠 88	🟢 96	🟢 93	🔴 38
/en/staking/	🟠 59	🟢 91	🟢 93	🟢 93	🔴 38
/en/whitepaper/	🟠 68	🟢 95	🟢 96	🟢 93	🔴 38
/en/nft/	🔴 49	🟢 95	🟢 96	🟢 93	🔴 38
/en/developers/docs/intro-to-ethereum/	🟠 71	🟢 94	🟢 96	🟢 93	🔴 38
/en/developers/tutorials/creating-a-wagmi-ui-for-your-contract/	🔴 45	🟠 88	🟢 96	🟢 93	🔴 38

Lighthouse scores are calculated based on the latest audit results

[minimalsm]

Images aren't loading for me on iOS.

[corwintines]

Using MacOS, Brave browser, not able to get images here as well.

[pettinarip]

@minimalsm @corwintines good catch, there seem to be a few weird things going on with redirects/middleware/trailingslashes with Next 14. Investigating...

[minimalsm]

@coderabbitai review

[coderabbitai]

Actions Performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Walkthrough

The recent updates to src/middleware.ts focus on enhancing path exclusion handling and refining the logic for locales and redirects. A config object with a matcher array was introduced to specify paths to exclude. Additionally, variable references within the middleware function were updated for consistency, and URL construction logic was refined to improve locale handling.

Changes

File	Change Summary
src/middleware.ts	Added config object with matcher array, updated variable references, and refined URL construction logic for locale handling.

---

Recent Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 92f3662 and f8fc217.

Files ignored due to path filters (1)

• netlify.toml is excluded by !**/*.toml

Files selected for processing (1)

• src/middleware.ts (2 hunks)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Note: Auto-reply has been disabled for this repository by the repository owner. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.

• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

Out of diff range and nitpick comments (2)

src/middleware.ts (2)

24-36: The matcher configuration looks correct and should effectively exclude the specified paths from middleware processing.

Consider adding more detailed comments to explain why each path is excluded, which could help future maintainers understand the context better.

---

Line range hint 41-63: The updates to the middleware function improve the handling of static files and locale redirection.

Consider adding error handling for cases where detectLocale might fail to detect a valid locale, to ensure robustness.

[corwintines]

Working for me now, LGTM

[minimalsm]

LGTM now :)

Images fixes, and seeing br encoding on js and css files.