Optimise production build #21
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis update introduces dynamic syntax highlighting initialization, lazy-loads route components, and adds a mailto contact feature for sponsors. The build process now optionally supports bundle visualization. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SponsorWidget
participant EmailClient
User->>SponsorWidget: Clicks sponsor widget
SponsorWidget->>SponsorWidget: Construct mailto URL with sponsor info
SponsorWidget->>EmailClient: Opens mailto link (pre-fills email)
sequenceDiagram
participant User
participant PostPage
participant Highlighter
participant DataFetcher
User->>PostPage: Navigates to post
PostPage->>Highlighter: initializeHighlighter()
Highlighter->>Highlighter: Dynamically import/register languages
Highlighter-->>PostPage: Initialization complete
PostPage->>DataFetcher: Fetch post data
PostPage->>Highlighter: highlight code blocks
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Suggested labels
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @gocanto, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request focuses on optimizing the application's build process and enhancing its loading performance. It achieves this by introducing a new tool for bundle analysis, implementing code splitting for various application routes, and refining a specific library import to reduce the overall bundle footprint.
Highlights
- Build Analysis Integration: I've integrated
rollup-plugin-visualizerinto the Vite configuration (vite.config.ts), allowing for detailed analysis of the final build bundle. This tool is configured to run without automatically opening the visualization report. - Route-based Code Splitting: All Vue router components in
src/router.tshave been updated to use dynamicimport()statements. This enables lazy loading of routes, which will improve the application's initial load performance by only loading component code when it's needed. - Dependency Management and Optimization: The
package.jsonandpackage-lock.jsonfiles have been updated to reflect the addition ofrollup-plugin-visualizerand@faker-js/fakeras development dependencies. Additionally, the import forhighlight.jsinsrc/pages/PostPage.vuehas been refined to import only the core library, contributing to a smaller bundle size. - Route Removal: The
/subscriberoute has been removed from the application's routing configuration insrc/router.ts.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces some excellent build optimizations, primarily by lazy-loading route components, which will significantly improve initial load times. The attempt to optimize highlight.js imports is also a good idea. I've left a couple of comments:
- A critical issue in
PostPage.vuewhere the change tohighlight.jsimports breaks syntax highlighting. - A medium-severity suggestion for
vite.config.tsto make the inclusion of the build visualizer conditional, improving build hygiene for production environments.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/partials/WidgetSponsorPartial.vue (1)
31-40: Consider making the recipient email configurable.The email functionality is well-implemented with proper URL encoding. However, the hardcoded recipient email (
otnacog@gmail.com) reduces maintainability.Consider making the email configurable:
+interface Sponsor { + title: string; + description: string; + email?: string; +} const sponsor: Sponsor = { title: 'Build The Site/App You Want!', description: 'Your website should be an asset, not an engineering challenge.', + email: 'otnacog@gmail.com', }; const sendEmail = () => { - const recipient = 'otnacog@gmail.com'; + const recipient = sponsor.email || 'otnacog@gmail.com';vite.config.ts (1)
17-17: Parameteriseopenflag & normalise env-var parsing
open: truewill try to launch a browser every time the stats build runs (CI/CD jobs, headless Docker, etc.).
Consider:
- Normalising the env-var so
1 / true / yesall enable the plugin.- Making the
opensetting controlled by a second flag (defaultfalse) to avoid unwanted browser launches.-import { visualizer } from 'rollup-plugin-visualizer'; +import { visualizer } from 'rollup-plugin-visualizer'; -plugins: [vue(), tailwindcss(), ...(process.env.VITE_VISUALIZER === 'true' - ? [visualizer({ open: true })] - : [])], + +const enableVisualizer = + ['true', '1', 'yes'].includes(String(process.env.VITE_VISUALIZER).toLowerCase()); +const openVisualizer = + ['true', '1', 'yes'].includes(String(process.env.VITE_VISUALIZER_OPEN).toLowerCase()); + +plugins: [ + vue(), + tailwindcss(), + ...(enableVisualizer ? [visualizer({ open: openVisualizer })] : []), +],This keeps the current behaviour but plays nicely with non-interactive environments.
package.json (1)
13-14: Usecross-envfor cross-platform environment variables
"build:stats": "VITE_VISUALIZER=true vite build"works on POSIX shells but fails on Windows’ default shell.
Switching tocross-envguarantees the script works for every contributor and CI runner.- "build:stats": "VITE_VISUALIZER=true vite build" + "build:stats": "cross-env VITE_VISUALIZER=true vite build"(You’ll need to
npm i -D cross-envif it’s not already present).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (46)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/images/recommendation/amrith-g.jpegis excluded by!**/*.jpegpublic/images/recommendation/dawid-makowski.jpegis excluded by!**/*.jpegpublic/images/talks/001.jpgis excluded by!**/*.jpgpublic/images/talks/002.jpgis excluded by!**/*.jpgpublic/images/talks/003.jpgis excluded by!**/*.jpgsrc/images/1-about.pngis excluded by!**/*.pngsrc/images/1-me.jpgis excluded by!**/*.jpgsrc/images/avatar-01.jpgis excluded by!**/*.jpgsrc/images/avatar-02.jpgis excluded by!**/*.jpgsrc/images/avatar-03.jpgis excluded by!**/*.jpgsrc/images/avatar-04.jpgis excluded by!**/*.jpgsrc/images/avatar-05.jpgis excluded by!**/*.jpgsrc/images/book.pngis excluded by!**/*.pngsrc/images/default-avatar.jpgis excluded by!**/*.jpgsrc/images/education-icon-01.svgis excluded by!**/*.svgsrc/images/education-icon-02.svgis excluded by!**/*.svgsrc/images/popular-post-01.jpgis excluded by!**/*.jpgsrc/images/popular-post-02.jpgis excluded by!**/*.jpgsrc/images/post-image.jpgis excluded by!**/*.jpgsrc/images/post-thumb-01.jpgis excluded by!**/*.jpgsrc/images/post-thumb-02.jpgis excluded by!**/*.jpgsrc/images/post-thumb-03.jpgis excluded by!**/*.jpgsrc/images/post-thumb-04.jpgis excluded by!**/*.jpgsrc/images/post-thumb-05.jpgis excluded by!**/*.jpgsrc/images/post-thumb-06.jpgis excluded by!**/*.jpgsrc/images/post-thumb-07.jpgis excluded by!**/*.jpgsrc/images/post-thumb-08.jpgis excluded by!**/*.jpgsrc/images/profile/001.pngis excluded by!**/*.pngsrc/images/profile/about.jpgis excluded by!**/*.jpgsrc/images/profile/me.jpgis excluded by!**/*.jpgsrc/images/profile/me.pngis excluded by!**/*.pngsrc/images/project-icon-01.svgis excluded by!**/*.svgsrc/images/project-icon-02.svgis excluded by!**/*.svgsrc/images/project-icon-03.svgis excluded by!**/*.svgsrc/images/project-icon-04.svgis excluded by!**/*.svgsrc/images/project-icon-05.svgis excluded by!**/*.svgsrc/images/project-icon-06.svgis excluded by!**/*.svgsrc/images/project-icon-07.svgis excluded by!**/*.svgsrc/images/project-icon-08.svgis excluded by!**/*.svgsrc/images/reference-01.jpgis excluded by!**/*.jpgsrc/images/reference-02.jpgis excluded by!**/*.jpgsrc/images/testimonial-01.jpgis excluded by!**/*.jpgsrc/images/testimonial-02.jpgis excluded by!**/*.jpgsrc/images/testimonial-03.jpgis excluded by!**/*.jpgsrc/images/testimonial-04.jpgis excluded by!**/*.jpg
📒 Files selected for processing (7)
.gitignore(1 hunks)package.json(3 hunks)src/pages/PostPage.vue(2 hunks)src/partials/WidgetSponsorPartial.vue(2 hunks)src/public.ts(2 hunks)src/router.ts(1 hunks)vite.config.ts(2 hunks)
🧰 Additional context used
🪛 GitHub Actions: Test Format Workflow
src/partials/WidgetSponsorPartial.vue
[error] 1-35: Code formatting changes detected in the file. The git diff shows modifications that likely caused the pipeline to fail. Please ensure code is formatted correctly and committed.
🔇 Additional comments (6)
src/public.ts (1)
68-106: Excellent implementation of dynamic syntax highlighting.This function effectively addresses the bundle optimization goals by:
- Using dynamic imports to reduce initial bundle size
- Implementing a singleton pattern to prevent duplicate registrations
- Loading languages in parallel for better performance
- Providing convenient aliases for common language variants
The implementation properly addresses the previous review concern about language registration.
src/pages/PostPage.vue (3)
117-117: Proper integration with optimized highlight.js.The import change to
highlight.js/lib/corecorrectly supports the new dynamic language loading system.
191-192: Correct initialization sequence.The async call to
initializeHighlighterbefore fetching post data ensures languages are properly registered before syntax highlighting is needed.
185-185: Updated highlighting call is correct.The change from
hljs.highlightElementtohighlight.highlightElementproperly aligns with the new import structure.src/router.ts (1)
25-42: Excellent implementation of lazy loading.Converting all route components to dynamic imports enables effective code splitting and reduces the initial bundle size. This directly supports the production build optimization objectives.
.gitignore (1)
3-3: Appropriate exclusion of generated build analysis files.Adding
stats.htmlto gitignore is correct for excluding build visualization files generated by the rollup-plugin-visualizer.
Summary by CodeRabbit
New Features
Improvements
Other Changes
/subscribepage from the site.