Updated Vite to properly setup PostCSS with PurgeCSS for removing all unused styles on build. #367
Conversation
…ing all unused styles on build.
vite/package.json
Outdated
| "private": true, | ||
| "repository": "twbs/examples", | ||
| "type": "module", |
There was a problem hiding this comment.
In Vite, the type: 'module' configuration is used to indicate that our project is using ECMAScript modules (ES modules). This is necessary when our code is written using the ES module syntax (import and export statements).
This is especially relevant if we are working with modern JavaScript syntax and features, as Vite supports both CommonJS and ES modules, and specifying the type helps in proper handling of module-related code.
There was a problem hiding this comment.
I have removed the "type": "module", setting from vite.config.js file in my latest commit.
vite/package.json
Outdated
| @@ -1,9 +1,10 @@ | |||
| { | |||
| "name": "vite", | |||
| "description": "Include Bootstrap's source Sass and individual JavaScript plugins with Vite.", | |||
| "version": "0.0.0", | |||
| "version": "0.0.1", | |||
There was a problem hiding this comment.
This is better left unchanged since we don't follow any versioning IIRC.
There was a problem hiding this comment.
I have reverted version number changes made to package.json file in my latest commit.
vite/vite.config.js
Outdated
| build: { | ||
| outDir: '../dist' | ||
| outDir: "../dist", |
There was a problem hiding this comment.
Unrelated changes in this file; we don't use prettier by choice.
There was a problem hiding this comment.
I have reverted the changes made to vite.config.js file in my latest commit.
vite/postcss.config.cjs
Outdated
| // `${bootstrap}/js/dist/collapse.js`, | ||
| // `${bootstrap}/js/dist/dropdown.js`, | ||
| // `${bootstrap}/js/dist/modal.js`, | ||
| `${bootstrap}/js/dist/offcanvas.js`, |
There was a problem hiding this comment.
Not sure this is a good default solution. One needs to know what to keep and what not.
There was a problem hiding this comment.
We could use the entire bootstrap Javascript file but it increases the output size by a few kilobytes.
We can use this
bootstrap/dist/us/bootstrap.bundle.js
There was a problem hiding this comment.
I introduced flexibility for users by allowing them to selectively include individual JS modules or opt for the entire Bootstrap bundle JS. This gives users the option to tailor their build based on their specific module requirements.
Reverted the inclusion fo type: module setting made in vite.config.js Additionally, I introduced flexibility for users by allowing them to selectively include individual JS modules or opt for the entire Bootstrap bundle JS. This gives users the option to tailor their build based on their specific module requirements. This approach aims to enhance user experience and provides more control over the project configuration.
Changes Made:
This pull request introduces crucial updates to enhance the project's build process. Specifically, I have forked the repository and implemented an updated configuration for Vite to seamlessly integrate PostCSS with PurgeCSS. This ensures that only necessary styles are included in the final build, significantly reducing the overall file size and improving performance.
Testing
I have thoroughly tested these changes to ensure compatibility with the existing codebase. The project builds successfully, and I have verified that the application functions as expected with the updated styling.