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版本有关

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从小白到大神之路之学习运维第64天--------Zabbix监控mysql、ftp服务以及自定义配置

第三阶段基础 时 间:2023年7月19日 参加人:全班人员 内 容: Zabbix监控mysql、ftp服务以及自定义 目录 一、Zabbix监控mysql数据库 二、Zabbix监控ftp服务 三、Zabbix自定义监控项 整体zabbix搭建完成,server端huyang1监…

吴恩达机器学习2022-Jupyter-Scikit-Learn教学

1可选实验室: 线性回归使用 Scikit-Learn 有一个开源的、商业上可用的机器学习工具包,叫做 scikit-learn。本工具包包含您将在本课程中使用的许多算法的实现。 1.1目标 在这个实验室里: 利用 scikit-学习使用线性回归梯度下降法来实现 1.2工具 您将利用 sciki…

Navidrome - 开源音乐服务器【打造属于自己的音乐播放器】「端口映射」随时随地想听就听

转载自cpolar极点云文章:Navidrome - 开源音乐服务器【打造属于自己的音乐播放器】「端口映射」随时随地想听就听 1. 前言 不知从何时开始,我们能用的音乐软件越来越少,笔者使用小米手机很久了,自从小米手机的自带音乐播放器变成…

RabbitMQ到底为什么要使用它?

导入 一个技术的衍生必然是为了解决现实出现的问题,在讲这个问题之前我们先了解一下传统开发中关于服务调用出现的问题(痛点)有哪些? 我们为什么要使用MQ? ①、同步——超时 在多服务体系架构中,必然存在…

Kyuubi的介绍优势(官网链接)

官网链接:https://kyuubi.apache.org/ Apache Kyuubi™ 是一个分布式多租户网关,用于在数据仓库和 Lakehouse 上提供无服务器 SQL。 Kyuubi 在各种现代计算框架(例如 Apache Spark、 Flink、 Doris、 Hive和Trino等)之上构建分布…

全志F1C200S嵌入式驱动开发(GPIO输出)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 和v3s一样,f1c200s本身的外部引脚比较少。所以这个时候,不可避免地,很多引脚的功能就会重叠在一起。这种情况下,我们就要学会取舍了。比如说,如果是学习sd卡的时候,那么spi的…

CSS——基础知识及使用

CSS 是什么 CSS是层叠样式表 (Cascading Style Sheets)的简写.CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。 基本语法规范 选择器 { 一条/N条声明 } 选择器决定针对谁修改 (找谁)声明决定修改啥. (干啥)声明的…

css3的新特性

动画效果 过渡 transition 鼠标放上去瞬间变大 过渡是变大的过程慢慢变化 第一个参数:对哪些值进行过渡。all为hover中所有,也可以指定属性 第二个参数:让动画过渡多长时间。要添加单位(s秒) 第三个参数&#xff1…

D354周赛复盘:特殊元素平方和+数组最大美丽值(滑动窗口)+合法分割最小下标

文章目录 6889.特殊元素平方和思路完整版取模注意:不能对0取余/取模解答错误:本题的数组最后一个下标是nums[nums.size()] 6929.数组的最大美丽值(排序滑动窗口)思路1:排序滑动窗口注意点 6927. 合法分割的最小下标&am…

SpringBoot+actuator和admin-UI实现监控中心

使用SpringBoot很久了&#xff0c;但是很少使用到SpringBoot的查看和监控&#xff0c;将来八成也不会用到&#xff0c;万一有机会用到呢&#xff1f;所以记录一下以前学习SpringBootactuator和adminUI实现监控中心的方式 Springboot的版本2.0.x <parent><groupId>…

Spring学习记录---回顾反射机制

目录 10.回顾反射机制 10.1 分析方法四要素 //不使用反射机制调用这些方法 使用反射机制调用方法 代码&#xff1a; 运行结果&#xff1a; 10.4 假设你知道属性名 测试代码 运行结果 10.回顾反射机制 10.1 分析方法四要素 package com.dong.reflect;public class Som…

【java爬虫】将优惠券数据存入数据库排序查询

本文是在之前两篇文章的基础上进行写作的 (1条消息) 【java爬虫】使用selenium爬取优惠券_haohulala的博客-CSDN博客 (1条消息) 【java爬虫】使用selenium获取某宝联盟淘口令_haohulala的博客-CSDN博客 前两篇文章介绍了如何获取优惠券的基础信息&#xff0c;本文将获取到的…

PyTorch 1.13简介

# 1.  PyTorch 1.13 据官方介绍&#xff0c;PyTorch 1.13 中包括了 BetterTransformer 的稳定版&#xff0c;且不再支持 CUDA 10.2 及 11.3&#xff0c;并完成了向 CUDA 11.6 及 11.7 的迁移。此外 Beta 版还增加了对 Apple M1 芯片及 functorch 的支持。 1.1 主要更新 Be…

C++第四讲

思维导图 仿照string类&#xff0c;实现myString类 /* ---------------------------------author&#xff1a;YoungZorncreated on 2023/7/19 19:20.--------------------------------- */ #include<iostream> #include<cstring>using namespace std;class myStri…

【数据结构】时间复杂度---OJ练习题

目录 &#x1f334;时间复杂度练习 &#x1f4cc;面试题--->消失的数字 题目描述 题目链接&#xff1a;面试题 17.04. 消失的数字 &#x1f334;解题思路 &#x1f4cc;思路1&#xff1a; malloc函数用法 &#x1f4cc;思路2&#xff1a; &#x1f4cc;思路3&…

如何使用DiskPart命令行格式化分区?

想要格式化磁盘分区&#xff0c;您可以使用磁盘管理工具&#xff0c;或在Windows文件资源管理器中右键单击驱动器并选择“格式化”。如果您更想使用命令行来格式化磁盘&#xff0c;那么Windows自带的DiskPart将是首选。 DiskPart有很多优点&#xff0c;例如&#xff0c;如果您想…

活动页服务端渲染探索

目标 通过采用在服务端渲染激励页的方式&#xff0c;降低页面加载白屏时间&#xff0c;从而提升激励 H5 渲染体验。 架构设计 前端服务框架调研选型 只对比分析以下两种方案&#xff1a; Vue3 Nuxt3 WebpackNext.js React Node.js ’Nuxt3Next.js介绍Nuxt是一个基于Vu…

Clickhouse基础和基本优化

CK基础和基本优化 一、ClickHouse的特点列式存储高吞吐写入能力数据分区与线程级并行表引擎的使用MergeTreeReplacingMergeTreeSummingMergeTree 二、SQL操作1.Insert2.Update 和 Delete3.查询操作4.alter操作5.导出数据 三、基于表的分布式集群集群写入流程&#xff08; 3分片…

旅游卡加盟代理合伙人模式软件开发

旅游卡加盟代理合伙人模式是近年来逐渐兴起的一种旅游产业发展模式&#xff0c;它通过将旅游卡加盟商与代理商紧密结合&#xff0c;实现资源共享、风险共担、合作共赢的目标。而软件开发作为旅游卡加盟代理合伙人模式的重要技术支持&#xff0c;对于该模式的实施和发展起着至关…

深入理解Java虚拟机(二)Java内存区域与内存溢出异常

一、前言 对于Java程序员来说&#xff0c;在虚拟机自动内存管理机制的帮助下&#xff0c;不再需要为每一个new操作去写配对的delete/free代码&#xff0c;不容易出现内存泄漏和内存溢出问题&#xff0c;看起来由虚拟机管理内存一切都很美好。不过&#xff0c;也正是因为Java程序…