Webpack 3.x 通过PurifyCSS Plugin按需加载bootstrap css样式

最新推荐文章于 2024-09-01 08:38:29 发布
最新推荐文章于 2024-09-01 08:38:29 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： webpack3-x 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stanxl/article/details/78647701
版权
本文介绍了如何使用PurifyCSS Plugin在Webpack 3.x配置中优化CSS加载，仅加载模板中实际使用的Bootstrap样式。通过安装并配置PurifyCSS Plugin，可以显著减少CSS文件大小，如未优化前的bootstrap.css为121KB，优化后减至11KB，确保按需加载资源。
摘要由CSDN通过智能技术生成

之前通过webpack把bootstrap css 样式引入到模板中，但是注意到的是把全部bootstrap css样式加载进来，但是当前的template中只有简单的些button/div/img/h1/等，而且这些元素只用到了一小部分样式，没有必要把全部的样式都加载进模板，所以需要改进，怎么办呢，PurifyCSS Plugin可以做到只加载当前页面所需要的样式。
先安装：

npm i -D purifycss-webpack purify-css

安装完成后当前版本是：

"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0"

接下来去webpack.config.js中去配置：

const glob = require(
最低0.47元/天 解锁文章
Stangor
关注
专栏目录
webpack.config.js配置（development&production）
weixin_44290787的博客
03-18 1345
development.config.js //引入html-webpack-plugin模块，目的是生成index.html模板 const HtmlWebpackPlugin=require('html-webpack-plugin'); //引入vue-loader中的plugin，才能成功编译.vue文件 const VueLoaderPlugin=require('vue-loader/...
webpack.config.js 参数详解
likunpeng6656201的博客
08-20 485
webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。 var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/app.js' ], output...
PurifyCSS:删除未使用的 CSS。 也适用于单页应用程序-开源
06-24
一个接受内容 (HTML/JS/PHP/etc) 和 CSS 的函数，并只返回使用过的 CSS。 PurifyCSS 不会修改原始 CSS 文件。 您可以写入新文件，例如缩小。 如果您的应用程序使用 CSS 框架，这将特别有用，因为许多选择器经常未使用。 静态分析您的代码以选择使用了哪些选择器。 CLI 当前不支持文件模式。 从样式表中删除未使用的 CSS 代码。 PurifyCSS 旨在通过 npm 安装，并使用 Grunt、Gulp 或 Webpack 等工具构建到您的构建过程中。 但是，如果您使用不同的开发堆栈或使用 CMS（如 Wordpress）构建站点，则可以使用在线工具来清理样式表。 特别是如果您使用 CSS 框架（如 Bootstrap 或多用途 Wordpress 主题），您实际上使用的 CSS 规则可能不到 20%。
webpack安装、基本显示页面以及加载CSS样式
qq_45390220的博客
07-19 273
安装 首先创建一个项目，初始化npm，有两种方式（以下所有命令在cmd中输入，首先进入你创建的文件夹的位置）： 1、npm init -y 这种是安装默认配置生成的package.json文件 2、npm init 这种是按照所输入的内容生成package.json文件 可以在本地安装cnpm，cnpm和npm的区别在于，npm安装插件从国外服务器下载，受网络影响大，可能会出现异常，而cnpm是...
Gulp-PurifyCSS 使用指南
最新发布
gitblog_01053的博客
09-01 759
Gulp-PurifyCSS 使用指南 gulp-purifycssRemoved unused CSS with the gulp build tool项目地址:https://gitcode.com/gh_mirrors/gu/gulp-purifycss 项目介绍 Gulp-PurifyCSS 是一个基于 gulp 的插件，它利用 PurifyCSS 功能来清理无用的 CSS 规则。这在前...
关于webpack5 使用 PurifyCSSPlugin 插件去除 多余css 报错TypeError: compiler.plugin is not a function 解决以及原因
热门推荐
m0_48469523的博客
03-20 1万+
关于 webpack5 使用 PurifyCSSPlugin 插件去除 多余css 报错TypeError: compiler.plugin is not a function 解决以及原因
推荐使用PurifyCSS：精简你的CSS代码
gitblog_00773的博客
08-09 183
推荐使用PurifyCSS：精简你的CSS代码 purifycssRemove unused CSS. Also works with single-page apps.项目地址:https://gitcode.com/gh_mirrors/pu/purifycss 项目介绍 PurifyCSS是一个强大的工具，它能够分析你的HTML、JavaScript、PHP等文件，并从中提取出实际使用的C...
推荐一款神奇的Webpack插件：PurifyCSSWebpack
gitblog_00065的博客
04-12 400
推荐一款神奇的Webpack插件：PurifyCSSWebpack 项目地址:https://gitcode.com/gh_mirrors/pu/purifycss-webpack 在前端开发中，我们常常面临一个问题——代码冗余。特别是CSS，因为模块化和自动化工具的使用，可能引入了大量未使用的样式规则，增加了页面负担。为了解决这个问题，我们推荐一个强大的Webpack插件——purifycss-...
详解webpack分离css单独打包
08-30
在上面的配置中，我们使用postcss-loader和autoprefixer来处理CSS文件，autoprefixer可以自动添加浏览器前缀，以确保CSS样式在不同浏览器中的兼容性。 使用webpack将CSS文件单独打包成一个或多个文件非常简单，只...
purifycss-webpack, 使用 web service删除未使用的CSS.zip
09-18
purifycss-webpack, 使用 web service删除未使用的CSS 插件web service的PurifyCSS 。这个插件使用 PurifyCSS 从你的CSS中删除未使用的选择器。 使用它与 extract-text-webpack-plugin服务。没有任何CS
推荐使用PurifyCSS：智能优化你的CSS
gitblog_00065的博客
05-10 445
推荐使用PurifyCSS：智能优化你的CSS 项目地址:https://gitcode.com/gh_mirrors/pu/purifycss 项目介绍 PurifyCSS 是一个功能强大的工具，它可以分析你的代码（包括HTML、JS等），并从提供的CSS文件中过滤出真正被使用的样式规则，帮助你实现更高效的CSS管理。尤其是当你的应用使用了大型CSS框架如Bootstrap时，PurifyCSS...
无用CSS清理PurifyCSS.zip
07-16
PurifyCSS 可以检测你的 CSS 文件，并生成一个不包含无用 CSS 定义的新文件。同时也支持通过 JavaScript 动态加载的 CSS 类。PurifyCSS 适合用于单页应用和静态页应用。使用效果：Bootstrap file: ~140k characters.Average Bootstrap usage: ~40% (at most)Minified Bootstrap: ~117k characters.Purified Minified Bootstrap: ~27k characters 标签：PurifyCSS
css plugins:100％建立网站CSS插件-开源
05-15
G16框架是100％基于CSS的框架，没有单一的javascript代码。 它是轻巧，简单，智能且结构良好的模块化系统，建立在16个可扩展的网格上，可创建平滑且无痒感的响应式布局。 它仅通过使用内联类来构造相关的html元素属性，而无需在样式表中编写任何代码。
自动清除html无用css,purifycss 清理无用css时，导致很多有用的css被删掉。
weixin_32001191的博客
05-31 399
想加入purifycss功能，但是build之后，很多有用的css都没有打包进来？webpack.build.jsvar webpack = require('webpack');var path = require('path');var glob = require("glob");let HtmlWebpackPlugin = require('html-webpack-plugin');v...
(14/24) css进阶：（入门）去除冗余的css
weixin_33937913的博客
12-16 144
(14/24) css进阶：（入门）去除冗余的css 在平时的项目开发中，我们会引入一些框架，比如：Bootstrap，但是在项目中通常我们只使用它的一小部分，还有部分是冗余的。更有甚有时候需求更改，带来DOM结构的更改，这时候我们可能无暇关注CSS样式，会造成很多冗余的CSS。我们得想办法消除冗余的CSS,如果靠人工去剔除，吃力又容易出错,因...
webpack(7)_CSS_使用purifycss-webpack来实现Tree Shaking
renzhongrui的博客
08-06 2812
本文主要讲解使用purifycss-webpack来实现css的Tree Shaking，Tree Shaking意思是摇树，即为将项目中没有用到过滤掉，不做打包，本章知识结构： 项目准备 使用purifycss 功能测试 项目准备 1、使用css-loader和style-loader 不了解的请先查看文章：https://blog.csdn.net/u010982507/artic...
PurifyCSS 使用指南
gitblog_00337的博客
08-09 505
PurifyCSS 使用指南 purifycssRemove unused CSS. Also works with single-page apps.项目地址:https://gitcode.com/gh_mirrors/pu/purifycss 项目介绍 PurifyCSS 是一个由 Ilias Ismanalijev 开发的 JavaScript 库，致力于从你的样式表中移除未使用的 C...
grunt环境搭建及使用_使用PurifyCSS和Grunt删除不必要CSS
Web design 教程小屋
07-09 247
在本教程中，我将向您展示如何使用Grunt和PurifyCSS轻松创建超轻量级的样式表。 我们将安装它，然后学习如何在使用Grunt和不使用Grunt的情况下运行它，以提供更多高性能的样式。 观看截屏 PurifyCSS是一个JavaScript工具，可解析您的标记文件（HTML，PHP甚至JavaScript），然后将它们与您使用的任何CSS交叉引用。 CSS中所有未使用的选择器都将被删...
webpack3-css进阶
糖衣
02-01 1686
使用less-loader 将less 文件打包与分离，使用sass-loader将sass 文件打包与分离。CSS3中有些属性需要加前缀，若自己查询并添加前缀比较麻烦，可以使用 postcss-loader 给 常css3 属性自动添加前缀。随着项目的进展，CSS也会越来越多，有时需求更改，带来了DOM结构的更改，这是若不关注css样式，会造成css的冗余。使用 PurifyCSS 可以消除未使用的css。
Webpack整合Bootstrap实战指南
整合Bootstrap后，为了优化打包文件的大小和加载速度，可以采取一些优化措施，比如使用Tree Shaking移除未使用的代码，配置Code Splitting进行代码分割以实现按需加载，使用ExtractTextPlugin或MiniCssExtractPlugin...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值