vue 项目优化

去除冗余的css

消除框架中未使用的CSS,初步达到按需引入的效果
使用背景:vue2.x, webpack3.x
使用插件:purifycss-webpack

安装:

npm i purifycss-webpack purify-css glob-all -D

安装后各个插件的版本:
“glob-all”: “^3.3.1”,
“purify-css”: “^1.2.5”,
“purifycss-webpack”: “^0.7.0”,

使用:
在 \build\webpack.prod.conf.js

const PurifyCSSPlugin = require('purifycss-webpack');
const glob = require('glob-all');

plugins: [
	new PurifyCSSPlugin({
	  paths: glob.sync([
	    path.join(__dirname, '../index.html'),
	    path.join(__dirname, '../src/**/*.vue')
	    //注意:这里要写上所有用到css的地方
	  ])
	})
]

打包后效果:
原大小:

使用后:
在这里插入图片描述

页面效果一切正常,不过随便在vue文件里定义的,没有用到的一些css,并没有被删除掉
官网:
PurgeCSS 中文文档
PurifyCSS Plugin

还有个去除css的插件是purgecss-webpack-plugin,但是使用一直不成功,暂时没有办法解决,可能和node版本有关

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/38939.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

轻松实现数据一体化:轻易云数据集成平台全解析

在当今快速发展的商业环境中,企业面临着大量来自多样数据源的数据。如何将这些数据进行高效集成和利用,成为企业数字化转型的关键挑战。轻易云数据集成平台提供了一个一站式的解决方案,帮助企业实现数据的无缝集成和高效利用。下面我们将通过…

[java安全]URLDNS

文章目录 [java安全]URLDNS前言HashMapURLURLStreamHandler调用过程调用链流程图POC [java安全]URLDNS 前言 URLDNS利用链是一条很简单的链子,可以用来查看java反序列化是否存在反序列化漏洞,如果存在,就会触发dns查询请求 它有如下优点&a…

docker-compose搭建prometheus+grafana+钉钉告警

前言: 本文将介绍使用docker-compose部署搭建promtheus监控容器、主机、服务等相关状态; 配合granfana面板构建监控大屏; 由于grafana的报警不是很友好,使用dingtalk,配合altermanager,实现钉钉报警。 …

pico添加devmem2读写内存模块

devmem2读写内存 自定义msh命令devmem2验证msh命令devmem2读CPUID读写全局变量 devmem2模块可实现对设备寄存器的读写操作。在RT-Thread的命令行组件Fish中添加devmem2模块,用户可在终端输入devmem2相关命令,FinSH根据输入对指定寄存器进行读写&#xff…

提高LLaMA-7B的数学推理能力

概述 这篇文章探讨了利用多视角微调方法提高数学推理的泛化能力。数学推理在相对较小的语言模型中仍然是一个挑战,许多现有方法倾向于依赖庞大但效率低下的大语言模型进行知识蒸馏。研究人员提出了一种避免过度依赖大语言模型的新方法,该方法通过有效利…

JVM中类加载的过程

文章目录 一、类加载是什么二、类加载过程1.加载2.验证3.准备4.解析5.初始化 三、什么时候进行类加载四、双亲委派模型1.三大类加载器2.加载过程 总 一、类加载是什么 把.class文件加载到内存中,得到类对象的过程。 二、类加载过程 1.加载 找到.class文件&#xff…

QT Quick初学笔记---第一篇

链接: QML Book中文版(QML Book In Chinese) 1、对Qt Quick的初步认识 Qt Quick是Qt5界面开发技术的统称,是以下几种技术的集合: QML:界面标记语言JavaScript:动态脚本语言QT C:跨平台C封装库 QML是与HTML类似的一…

守护数智未来,开源网安受邀参加2023OWASP北京论坛

2023年7月14日,OWASP中国与网安加社区联合举办的“2023OWASP中国北京安全技术论坛”在北京圆满召开,开源网安受邀参加本次论坛并分享“软件供应链安全治理实践”。 本次“2023OWASP中国北京安全技术论坛”是OWASP中国北京地区年度重要活动之一&#xff…

数据库信息速递 MONGODB 6.0 的新特性,更多的查询函数,加密查询,与时序数据集合 (译)...

开头还是介绍一下群,如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请联系 liuaustin3 ,在新加的朋友会分到3群(共…

ffmpeg学习之音频解码数据

音频数据经过解码后会被保存为,pcm数据格式。而对应的处理流程如下所示。 avcodec_find_encoder() /*** 查找具有匹配编解码器ID的已注册编码器.** param id AVCodecID of the requested encoder* return An encoder if one was found, NULL otherwise.*/ const A…

docker k8s

Docker docker到底与一般的虚拟机有什么不同呢? 我们知道一般的linux系统即GNU/Linux系统包括两个部分,linux系统内核GNU提供的大量自由软件,而centos就是众多GNU/Linux系统中的一个。 虚拟机会在宿主机上虚拟出一个完整的操作系统与宿主机完…

数智领航 信创强基 | GBASE南大通用携手金仕达共助金融用户合规风控

GBASE南大通用董事长丁明峰先生应邀出席大会并在主论坛发表题为《去全球化背景下的中国数据库发展策略》的主题分享。 技术的迭代发展是经济增长、产业升级的核心动力。纵观近现代社会史,信息技术和通信技术的迅猛发展,帮助人类实现了PC互联网到移动互联…

MyBatis全篇

文章目录 MyBatis特性下载持久化层技术对比 搭建MyBatis创建maven工程创建MyBatis的核心配置文件创建mapper接口创建MyBatis的映射文件测试功能加入log4j日志功能加入log4j的配置文件 核心配置文件的完善与详解MyBatis的增删改查测试功能 MyBatis获取参数值在IDEA中设置中配置文…

Java遍历集合方法分析(实现原理、算法性能、适用场合)

Java遍历集合方法分析(实现原理、算法性能、适用场合) 概述 java语言中,提供了一套数据集合框架,其中定义了一些诸如List、Set等抽象数据类型,每个抽象数据类型的各个具体实现,底层又采用了不同的实现方式…

Web3时代来临:你准备好了吗?

如果你正在浏览本文,那么很可能你已经是Web3时代的一部分了,或者至少是将要成为其中的一员。因为Web3时代即将来临,它将彻底改变我们对互联网的认识和使用方式。 那么,什么是Web3时代呢?简单来说,它是指基于…

Kubernetes集群故障排查—审计

Kubernetes 审计(Auditing) 功能提供了与安全相关的、按时间顺序排列的记录集, 记录每个用户、使用 Kubernetes API 的应用以及控制面自身引发的活动。 审计功能使得集群管理员能够回答以下问题: 发生了什么?什么时候…

【微信小程序-uniapp】CustomPickerMul 自定义多选选择器组件

1. 效果图 2. 组件完整代码 <template><view class="custom-picker-mul"><view :class&#

MySQL(十):MySQL语法-进阶

MySQL语法-进阶 数据类型Text 类型Number 类型Date 类型 ASALTER TABLEconcat、group_concatSQL注入阻止SQL注入方案一方案二方案三 HAVING 子句临时表正则表达式获取服务器元数据事务导出数据导出数据导出表作为原始数导出SQL格式的数据 导入数据解决无法导入问题使用 LOAD DA…

西安---高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测技术应用

能源是国民经济发展和人民生活必须的重要物质基础。在过去的200多年里&#xff0c;建立在煤炭、石油、天然气等化石燃料基础上的能源体系极大的推动了人类社会的发展。但是人类在使用化石燃料的同时&#xff0c;也带来了严重的环境污染和生态系统破坏。近年来&#xff0c;世界各…

C语言 —— 浮点类型详解及 IEEE754 规定

【C语言趣味教程】(3) 浮点类型&#xff1a;单精度浮点数 | 双精度浮点型 | IEEE754 标准 &#x1f517; 《C语言趣味教程》&#x1f448; 猛戳订阅&#xff01;&#xff01;&#xff01; ​—— 热门专栏《维生素C语言》的重制版 —— &#x1f4ad; 写在前面&#xff1a;这是…