[Feature] Introducing image compression using imagemin #654
Conversation
|
For some reason |
There was a problem hiding this comment.
Code looks good except for some nits. Would be better to give a flag to users in case they want to opt out of the compression for faster build times. @JoelMarcey Thoughts?
lib/server/generate.js
Outdated
| @@ -399,6 +404,24 @@ async function execute() { | |||
| } | |||
|
|
|||
| fs.writeFileSync(mainCss, cssContent); | |||
| } else if (normalizedFile.match(/\.png$|.jpg$|.svg$|.gif$/)) { | |||
| console.log(normalizedFile); | |||
There was a problem hiding this comment.
console.log should be removed.
lib/server/generate.js
Outdated
| } else if (normalizedFile.match(/\.png$|.jpg$|.svg$|.gif$/)) { | ||
| console.log(normalizedFile); | ||
| let parts = normalizedFile.split(sep + 'static' + sep); | ||
| let targetDirectory = join( |
There was a problem hiding this comment.
Was following the same convention used on the next block, should I update that one as well?
|
Deploy preview for docusaurus-preview ready! Built with commit eb00611 |
|
Re: a flag, is the image quality that diminished that the average person would notice on a website? If so, a flag makes more sense to me. If not, then a flag is probably still good, but maybe less of a mandatory thing. |
|
This is a lossless compression, image quality is not affected as it is only removing unnecessary meta data like EXIF info and others. |
|
OK does the flag name |
|
Let's call it |
|
Actually -- a name like |
|
|
|
I agree. Because we might potentially add flags for the CSS compression (and other types of assets). |
|
Perfect, will do |
|
Does this sound good: This will generate a `build` folder inside the `website` directory containing the `.html`
files from all of your docs and other pages included in `pages`.
**** The new part below ****
The build command will
also compress all the images you place in your assets directory unless you supply it with
the flag `--skip-image-compression`. |
|
No, that flag should be documented on this page - https://docusaurus.io/docs/en/commands.html#docusaurus-build
|
|
Flag updated and added to the docs. |
|
@ahmadalfy CI and the preview build is failing and I'm not sure why. Could you try to build locally and make sure your code is prettified? |
|
I ran prettier and introduced a change, build working though through Should work now :) |
|
Awesome! Thank you for the PR! Such a huge win for us 😄 |
|
Thanks for the welcoming spirit 💘 |
* migrating to react 16 * Add WarriorJS to Docusaurus users (#656) * Separate users data from code * Add WarriorJS to Docusaurus users * [Feature] Introducing image compression using imagemin (#654) * Introduce imagemin for compressing images * Replace original images with the optimized ones * Add imagemin-svgo to dependencies * Remove console statement, replace let with const * Replace let with const * Add --skip-image-compression * Run Prettier * Fix header * Prettier
Motivation
Static assets should always be compressed to improve loading speed and enhance user experience. The static images in the user folder was 4.4MB. After using imagemin the total size of the image was reduced to nearly the half.
Also this PR include replacing the images in the example website with the optimized ones to improve the download speed for future users.
Have you read the Contributing Guidelines on pull requests?
Yes
Related Issues
#568