rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Docs: add unused css optimization for webpack

Browse Source
This commit is contained in:
Priyash Patil 2023-10-14 21:51:43 +05:30
parent a4d2f59702
commit 5d12ba87ce
1 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
site/content/docs/5.3/getting-started/webpack.md
View File

@ -314,6 +314,58 @@ After running `npm run build` again, there will be a new file `dist/main.css`, w
<body> <body>
``` ```
### Remove unused CSS
To remove unused CSS from the final bundle, you can use the `purgecss-webpack-plugin`. This plugin helps eliminate CSS that is not used in your application, reducing the size of your CSS files.
First, install the plugin:
```sh
npm install --save-dev purgecss-webpack-plugin
```
Then instantiate and use the plugin in the Webpack configuration.
```diff
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,9 +1,15 @@
'use strict'
const path = require('path')
+const glob = require("glob");
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
+const {PurgeCSSPlugin} = require("purgecss-webpack-plugin");
+
+const PATHS = {
+ src: path.join(__dirname, "src"),
+};
module.exports = {
mode: 'development',
@@ -19,7 +25,13 @@ module.exports = {
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
- new miniCssExtractPlugin()
+ new miniCssExtractPlugin(),
+ new PurgeCSSPlugin({
+ paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true}),
+ safelist: {
+ deep: [/dropdown-menu$/]
+ },
+ })
],
module: {
rules: [
```
In the example, the `paths` parameter tells the plugin where to look for HTML files and only keep the CSS classes used in those files. The `safelist` option lets you specify which classes to keep, even if they're not directly used in your code.
Make sure to adjust the `paths` and `safelist` to match your project's structure and requirements. For more details, check the [plugin's documentation](https://purgecss.com/plugins/webpack.html).
### Extracting SVG files ### Extracting SVG files
Bootstrap's CSS includes multiple references to SVG files via inline `data:` URIs. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack's asset modules feature. Bootstrap's CSS includes multiple references to SVG files via inline `data:` URIs. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack's asset modules feature.