vue 项目优化

news2024/12/28 22:09:07

去除冗余的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.coloradmin.cn/o/754372.html

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

相关文章

基于linux下的高并发服务器开发(第一章)- GDB调试(3)1.15

04 / GDB命令:断点操作 其中num代表断点编号,Type(类型)为断点(breakpoint),Disp为断点状态,Enb是yes代表为有效断点,adress为断点地址,What说明断点的在那个…

APACHE KAFKA本机Hello World教程

目标 最近想要简单了解一下Apache Kafka,故需要在本机简单打个Kafka弄一弄Hello World级别的步骤。 高手Kafka大佬们,请忽略这里的内容。 步骤 Apacha Kafka要求按照Javak8以上版本的环境。从官网下载kafka并解压。 启动 # 生产kafka集群随机ID KA…

游戏AI的崛起:腾讯、网易等企业引领行业变革

随着游戏AI技术的迅猛发展,游戏行业正在经历一场前所未有的变革。在这个数字化时代,腾讯、网易等行业领先企业正以惊人的步伐在游戏AI领域取得重要进展。他们已经进入了游戏AI的2.0阶段,实现了内容多元化和行为智能化。尤其引人瞩目的是&…

SOLIDWORKS PDM—文件类别的限定

SOLIDWORKS产品数据管理 (PDM) 解决方案可帮助您控制设计数据,并且从本质上改进您的团队就产品开发进行管理和协作的方式。使用 SOLIDWORKS PDM Professional,您的团队能够:1. 安全地存储和索引设计数据以实现快速检索;2. 打消关于…

【GUI】基于开关李雅普诺夫函数的非线性系统稳定(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

superset安装

1、拖动安装包 sh Miniconda3-latest-Linux-x86_64.sh安装路径: /usr/local/miniconda3 2、配置环境变量 在/etc/profile中添加两句 export CONDA_HOME/usr/local/miniconda3 export PATH$PATH:$CONDA_HOME/bin重新加载环境变量 source /etc/profile3、取消激活…

javascript循环数组有什么方法

javascript循环数组的方法 1、循环遍历数组 问题:想要很容易地访问数组的所有元素。 for循环可以用来访问数组的每一个元素。数组从0开始,而且数组属性length用来设定循环结束。 2、按顺序存储和访问值 问题:想要以这样一种方式来存储值&a…

怎么转发别人的朋友圈到自己朋友圈?

一键转发朋友 搜索指定好友,选择好友朋友圈内容,点击转发 2.转发后会跳到【发朋友圈】页面,可直接发送,也可二次编辑(修改文案)

SpringCloud——消息驱动Stream

屏蔽底层消息中间件MQ的差异,降低切换成本,统一消息的编程模型。 生产者 一、依赖 spring-cloud-starter-stream-rabbit (rabbitMQ中间件) 二、配置文件 server:port: 8801spring:application:name: cloud-stream-providercl…

从C语言到C++_26(set+map+multiset+multimap)力扣692+349+牛客_单词识别

目录 1. 关联式容器 1.1 树形结构的关联式容器 2. set的相关介绍 2.1 set的构造和迭代器 2.2 set的容量和操作函数 2.3 set使用代码 2.4 multiset使用 3. map的相关介绍 3.1 键值对 3.2 map的构造和迭代器 3.3 map的容量和操作函数 3.4 map使用代码 3.5 multimap使…

ai绘画软件免费下载哪个好用?探索ai绘画生成器

曾经有一个年轻的艺术爱好者,名叫小明。他对绘画充满热情,渴望能够通过绘画表达自己的创造力和想法。然而,他并没有接受过正规的美术训练,也没有负担得起的昂贵绘画软件。因此,他开始思考ai绘画软件免费下载哪个好用&a…

SpringCloud——消息总线Bus

SpringCloud Bus将分布式系统的节点与轻量级消息系统链接起来的框架,是对SpringCloud Config的加强,广播自动版的配置。 支持两种消息代理:RabbitMQ和Kafka 一、创建工程,添加依赖 spring-cloud-starter-config spring-cloud-st…

【DeepSpeed 教程】四,DeepSpeed ZeRO++博客和代码解析

0x0. 系列文章 DeepSpeed-Chat 打造类ChatGPT全流程 笔记二之监督指令微调DeepSpeed-Chat 打造类ChatGPT全流程 笔记一【DeepSpeed 教程翻译】三,在 DeepSpeed中使用 PyTorch Profiler和Flops ProfilerDeepSpeed结合Megatron-LM训练GPT2模型笔记(上&…

程序员如何制作PPT?

有道无术,术尚可求也;有术无道,止于术。大家好,我是程序员雪球,今天让我们一起探讨如何从零开始制作高质量的 PPT。 上周,领导要求我撰写一份关于 4到6月持续集成运营分析的报告,并通过 PPT 的形…

【Python爬虫与数据分析】爬虫常用标准库(时间、随机数)

目录 一、模块化概述 二、time库 1. 时间获取 2. 时间格式化 3. 程序计时 三、datetime库 1. datetime.datetime类 2. datetime.timedelta类 四、random库 1. 基本随机函数 2. 扩展随机函数 3. 随机时间的生成 一、模块化概述 Python程序由模块组成,一个…

Redis数据结构 — SkipList

目录 跳表结构设计 跳表节点结构设计 跳表节点查询过程 跳表节点层数设置 为什么用跳表不用红黑树? 跳表平均指针数目为1/(1-p)公式推导 跳表的优势是能支持平均 O(logN) 复杂度的节点查找,支持进行高效的范围查询 SkipList(跳表&…

idea-控制台输出乱码问题

idea-控制台输出乱码问题 现象描述: 今天在进行IDEA开发WEB工程调式的时候控制台日志输出了乱码,如下截图 其实开发者大多都知道乱码是 编码不一致导致的,但是有时候就是不知到哪些地方不一致,今天我碰到的情况可能和你的不相同…

【C++】多态及原理

文章目录 1.多态的概念2.多态的定义及实现2.1多态的构成条件2.2虚函数的重写2.3析构函数的重写2.4 C11 override和 final2.5重载、重写(覆盖)、重定义(隐藏)的对比 3.抽象类3.1定义 4.多态的原理4.1虚函数表 虚表单继承的虚表多继承的虚表问答题 1.多态的概念 多态,…

(数组与矩阵) 剑指 Offer 03. 数组中重复的数字 ——【Leetcode每日一题】

❓ 剑指 Offer 03. 数组中重复的数字 难度:简单 找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0~n-1 的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出…

新功能: 全新的UI视图、搜索设置和强大的API特性

我们在ftrack Studio中引入的一些超赞的新功能,旨在将用户体验提升到一个新的水平!准备好提高生产效率、优化任务流程,并获得有价值的见解,以便为你的所有项目做出数据驱动的决策。 本月,我们为ftrack Studio带来了几个…