Optimizations and improvements #25
Conversation
There was a problem hiding this comment.
First of all, thank you very much! Cache busting was something on my list, but I didn't understand it. Also thanks for finding other opportunities here.
I just have a few questions and want to understand fully before I merge. They are below in the review! Please help me understand the decisions and code a bit better.
Cheers!
| purgecss({ | ||
| content: ['./**/*.html'], | ||
| keyframes: true, | ||
| defaultExtractor: content => content.match(/[A-z0-9-:/]+/g) |
There was a problem hiding this comment.
While extracting css purge css extractor skips classes like hover:bg-blue there are classes like this is tailwind css. so i have added regex to overcome that issue. For more info FullHuman/purgecss#183
| @@ -23,6 +61,10 @@ module.exports = merge(common, { | |||
| ] | |||
| }, | |||
| plugins: [ | |||
| new MiniCssExtractPlugin({ | |||
| filename: 'style.[contentHash].css', | |||
There was a problem hiding this comment.
Could you please explain why you added the content hash and ids below?
I don't fully understand and would like to!
There was a problem hiding this comment.
webpack provides a method of templating the filenames using bracketed strings called substitutions.
The [contenthash] substitution will add a unique hash based on the content. so whenever the content is changed content hash will change which will result in the changed filename. and browser will load the new file as the name has been changed.
If the name is same browser loads cached files if names are same. so your deployed changes sometimes don't reflect for users. to overcome that issue I have added contentHash in output filename in prod.
There was a problem hiding this comment.
Oh so this is what helps with the cache busting. Got it, thanks!
Decription
I have added a few optimizations and improvements and fix for #22 issue.
1. Cache busting for final javascript bundle.
currently, there is no cache busting in production mode. so sometimes when we deploy old files are cached by browser so those changes don't reflect when a user views page unless a user does hard refresh.
2. Separate chunk for vendor files
Code for third party libs does not change that often so keeping it in different chunk can be helpful as the content of vendor chunk won't be change so often (e.g bootstrap js, jquery) so that chunk can be loaded from cache.
3. CSS purge, minification, and extraction.
When we are working in dev mode there is no need for CSS extraction, minification and purging unused CSS.
4. HTML minification
When we are working in dev mode there is no need of minification of html so we can remove that extra step in dev mode.
5. Fixed public path for images
If user decides to change output directory for some of html files injected path of images wont load.