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.

Sign up for GitHub

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

Jump to bottom

Enhance Build Process, JavaScript Handling, and Image Optimization #8187

Draft
wants to merge 47 commits into
base: main
Choose a base branch
from
Draft

Enhance Build Process, JavaScript Handling, and Image Optimization #8187

wants to merge 47 commits into from

Conversation

RileySeaburg
Copy link
Member

@RileySeaburg RileySeaburg commented Nov 13, 2024 •
edited
Loading

Here's the completed template with the details integrated:

Summary

This pull request introduces several significant changes aimed at improving the build process, optimizing JavaScript handling, and enhancing image loading. These changes streamline the development workflow, enhance performance, and improve the user experience by prioritizing local resources and introducing dynamic loading.

Preview

Link to Preview

Solution

What the solution is:

The solution improves the build process, introduces enhanced JavaScript handling, and optimizes image management for better performance and user experience.

Why this approach was chosen:

  1. The updated build scripts and configurations simplify the workflow, reduce errors, and align with modern standards.
  2. Enhanced image handling prioritizes local resources, improving loading times and offering a fallback to CDN images.
  3. Lazy loading and dynamic image handling further optimize performance.

How the change was implemented:

  1. Build Process Updates:

    • Updated config/gulp/scripts.js to streamline webpack configurations and improve error handling.
    • Modified package.json to include new development and build scripts (dev, dev:js, dev:sass, etc.) and updated dependencies.
    • Introduced new configuration files for rsbuild (rsbuild.config.js) and rspack (rspack.config.js) to optimize build settings.

  2. Enhanced Image Handling:

    • Updated templates to prioritize local images, with fallbacks to CDN images.
    • Added lazy loading in templates like shortcodes/img.html to boost performance.
    • Implemented JavaScript to dynamically manage image data and optimize loading (stream-images.js).

  3. Dependency Updates:

    • Added dependencies like @rsbuild/core and related packages for streamlined build processes.

Possible limitations:

  1. The changes depend on the availability of updated dependencies, which might affect compatibility.
  2. Introducing new configurations (rsbuild and rspack) may require team members to familiarize themselves with the updated process.

How To Test

  1. Clone the repository and check out the PR branch.
  2. Run the updated build scripts using the following commands:
    • npm run dev
    • npm run build
  3. Open the preview link to verify the updates:
    • Check lazy loading and dynamic image handling for all templates.
    • Verify that JavaScript compilation and webpack updates function without errors.
  4. Review fallback behavior for images to ensure local images are prioritized, with CDN as a backup.

@github-actions GitHub Actions
Copy link

🔍 Preview in Federalist

@RileySeaburg RileySeaburg force-pushed the rs-lazy-load-images branch 2 times, most recently from d73a776 to 149a9de Compare November 19, 2024 16:29
@RileySeaburg RileySeaburg requested review from clmedders and nick-mon1 and removed request for clmedders November 20, 2024 15:26
@RileySeaburg RileySeaburg self-assigned this Nov 20, 2024
@RileySeaburg RileySeaburg added Bug: Content Cleanup Bug Fix This fixes an actual bug labels Nov 20, 2024
@RileySeaburg RileySeaburg changed the title update image to use rel path Enhance Build Process, JavaScript Handling, and Image Optimization Nov 20, 2024
RileySeaburg and others added 20 commits November 25, 2024 11:03
@RileySeaburg
update image to use rel path
221672d
@RileySeaburg
update to use local images
5506c26
@RileySeaburg
push updated scripts.js -really webpack
0e2a3cc
@RileySeaburg
fix federalist script
b25d755
@RileySeaburg
Add RSpack Rspack compiled successfully in 335 ms
2d62127
@RileySeaburg
builds with new commands dev and dev:s3 - uses rspack to build and br…
e812276 
…owsersync to reload on changes
@RileySeaburg
Add rsbuild configuration and update package scripts for improved bui…
c9f50f9 
…ld process
@RileySeaburg
add pagination
8b0cf67
@RileySeaburg
add lint fixes
2f73391
@RileySeaburg
accurately call rsbuild
21d25f2
@RileySeaburg
accurately call rsbuild
84e5507
@RileySeaburg
remove unsued package
80a20be
@RileySeaburg
everything works, just need to optmize it
8bcee33
@RileySeaburg
fix sass error
a97140c
@RileySeaburg
Update packages and note new S3 mount
0273de6
@RileySeaburg
Remove unused S3 packages
5d805d5
@RileySeaburg
test new changes
7320094
@RileySeaburg
fix build
766933c
@RileySeaburg
fix build script
d3c7c5b
@RileySeaburg
fix sass issue
89f3fa9
@RileySeaburg
test dev js
f40589e
@RileySeaburg
works, needs cleaning
4837630
@RileySeaburg
works, needs cleaning
9df6874
@RileySeaburg
optimize for hug, remove unused scripts and optimize images page
57804a5
@RileySeaburg
format files
f4d9575
@RileySeaburg
update file upload
9d617af
@RileySeaburg
remove gulp from circleci
9dea570
@RileySeaburg
remove uncessary step from circleci
30d21b0
@RileySeaburg
remove hugo minify to test build
500f594
@RileySeaburg
update file upload to include cross platform binaries
50540a5
@RileySeaburg
feat: add preview environment configuration for cloud.gov Pages
22203c7 
- Add preview-specific Hugo configuration
- Add preview build script
- Update package.json to handle preview builds
- Fix MIME type issues in preview environment
@RileySeaburg
feat: use Hugo's built-in minification pipeline
73b32d8 
- Update head.html to use Hugo's resource.Minify for CSS and JS
- Add fingerprinting for cache busting
- Add integrity hashes for security
- Implement proper asset pipeline for custom CSS
@RileySeaburg
feat: use Hugo's built-in minification pipeline
d78cf3d 
- Update head.html to use Hugo's resource.Minify for CSS and JS
- Add fingerprinting for cache busting
- Add integrity hashes for security
- Implement proper asset pipeline for custom CSS
@RileySeaburg
fix: ensure hugo is available in preview builds
10d74a6 
- Add hugo-bin dependency with specific version 0.136.3
- Update build-preview.js to use npx hugo
- Remove unnecessary dependencies
- Set proper environment variables for hugo build
@RileySeaburg
fix: correct Hugo resource pipeline in head.html
6af9e74 
- Fix resource path handling
- Add null checks for resources
- Update minification pipeline order
- Fix type mismatch in resource transformation
@RileySeaburg
fix: correct Hugo resource pipeline in head.html
4a33e8a 
- Fix resource path handling
- Add null checks for resources
- Update minification pipeline order
- Fix type mismatch in resource transformation
@RileySeaburg
fix: clean up head.html template
9d432b2 
- Remove duplicate head tag
- Add null check for styles before including them
- Fix SCSS pipeline to use proper resource transformations
- Clean up template structure and indentation
@RileySeaburg
fix: enhance preview environment configuration
2edcd15 
- Add explicit publishDir and assetDir settings
- Configure detailed MIME type handling
- Add server headers for content types
- Set security settings for media types
- Improve asset pipeline configuration
@RileySeaburg
fix: enhance preview environment configuration
f6f4945 
- Add explicit publishDir and assetDir settings
- Configure detailed MIME type handling
- Add server headers for content types
- Set security settings for media types
- Improve asset pipeline configuration
@RileySeaburg
fix: use Hugo extended version from .hugo-version
dc75855 
- Update build-preview.js to use Hugo version from .hugo-version
- Remove hugo-extended npm dependency
- Add proper version detection and error handling
- Ensure extended version is used for SCSS compilation
@RileySeaburg
fix: update Hugo configuration for extended version
b2bb57c 
- Add markup settings for syntax highlighting and markdown
- Update SCSS configuration to use dartsass transpiler
- Configure proper media types and headers
- Add security settings for content types
@RileySeaburg
fix: update build script to use Hugo extended version
be79978 
- Read Hugo version from .hugo-version file
- Use hugo_extended_ prefix for binary name
- Set HUGO_VERSION environment variable
- Add proper error handling and logging
@RileySeaburg
fix: update SCSS configuration for Hugo extended
7c105ea 
- Move SCSS config to dedicated sass section
- Set dartsass as transpiler
- Configure source maps and include paths
- Remove duplicate SCSS settings from build section
@RileySeaburg
fix build
2050a71
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nick-mon1 nick-mon1 Awaiting requested review from nick-mon1

At least 1 approving review is required to merge this pull request.

Assignees

@RileySeaburg RileySeaburg

Labels
Bug: Content Cleanup Bug Fix This fixes an actual bug
Projects
Digital.gov Events
Status: No status
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@RileySeaburg