Only bundle the Swiper modules that we use #4455
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
PR: waiting for review
PikachuEXE
approved these changes
Dec 14, 2023
absidue
requested review from
ChunkyProgrammer,
efb4f5ff-1298-471a-8973-3d47447115dc,
kommunarr and
MarmadileManteater
efb4f5ff-1298-471a-8973-3d47447115dc
approved these changes
Dec 15, 2023
kommunarr
approved these changes
Dec 16, 2023
github-actions
bot
removed
the
PR: waiting for review
PikachuEXE
added a commit
to PikachuEXE/FreeTube
that referenced
this pull request
Dec 20, 2023
* development: Bump the babel group with 2 updates (FreeTubeApp#4466) Bump the eslint group with 4 updates (FreeTubeApp#4468) Bump @seald-io/nedb from 4.0.2 to 4.0.3 (FreeTubeApp#4469) Bump marked from 11.0.1 to 11.1.0 (FreeTubeApp#4470) Bump github/codeql-action from 2 to 3 (FreeTubeApp#4472) Only bundle the Swiper modules that we use (FreeTubeApp#4455)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Only bundle the Swiper modules that we use
Pull Request Type
Description
Currently we bundle the entirety of
swiper. Asswiperhas a lot of features, that means we end up bundeling a lot of code that we don't need. This pull request switches to only bundling theswipermodules that we actually use. Previously the CSS was previously in the JavaScript bundle and Swiper injected it at runtime, now we have only the styles we need.renderer.js2.01 MB(2115948 bytes)1.94 MB(2041041 bytes)web.js1.66 MB(1744320 bytes)1.59 MB(1669158 bytes)swiper.css6.33 KB(6486 bytes)Web Components have their own scope, known as a shadow DOM, so any CSS that you want inside the Web Component has to be inside that shadow DOM. Swiper supports injecting the CSS either by giving it links to CSS files or by giving it raw CSS. As we only want to inject the styles that Swiper needs, into the component, I decided to split it out into a separate CSS file. That created it's own challenges though, as we need to reference it from JavaScript it has to have a predictable name so the pattern of
[name].[contenthash].css(renderer.abcdefg.css) that we use for the main CSS files wasn't going to work, because we don't know the hash in the JavaScript file. Originally I tried doing it with webpack's split chunks feature, but that resulted in the unpredictable name mentioned previously. In the end I decided to use the CopyWebpackPlugin with it'stransformAlloption to combine the 3 CSS files into one, the generated file still gets optimised, as the optimisations are done after copying.Testing
Test that community posts with multiple images still work the same as before this pull request.
Example channel
https://www.youtube.com/@MrBeast/communityYou can only test on the channel page at moment, as the subscriptions page currently has a layout bug on the community tab, which also exists without this pull request.
Desktop