前端webpack项目性能优化——体积压缩和compression-webpack-plugin的使用

news2024/11/6 10:01:23

前端webpack项目性能优化——体积压缩和compression-webpack-plugin的使用

    • 需求
    • 优化
      • 结果

需求

脚手架搭建的项目,会默认开启sourceMap,此时打包下来的包会很大,如图:map文件比所有js文件都大,会导致包整体体积过大,js文件大小超过100k,也很大不符合预期,这还只是空项目的情况下
在这里插入图片描述

优化

优化方式有两种:

  1. 如果不需要用到sourceMap文件,可以在打包时关闭map文件生成,在vue.config.js中配置productionSourceMap: process.env.NODE_ENV === 'development'即可。
  2. 采用gzip的方式压缩js、css、html和字体等资源文件,在传输的过程中减少带宽,已达更快传输
    1. 引入压缩插件npm i compression-webpack-plugin@10.0.0 -D
    2. 配置插件
    const CompressionPlugin = require("compression-webpack-plugin");
    // 在module.exports对象中配置
    configureWebpack: (config) => {
        // gzip压缩
        const compressionPlugin = new CompressionPlugin({
        	// 正则匹配压缩的文件后缀
            test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/,
            // 压缩后的名字
            filename: '[path][base].gz',
            // 大于这个值的文件就会压缩
            threshold: 10240,
        });
        config.plugins.push(compressionPlugin);
    },
    

结果

配置了gzip压缩后的文件体积小了很多,如图:
在这里插入图片描述
如果觉得还不够小的话可以通过其他方式进一步进行优化。

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

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

相关文章

NIFI大数据进阶_Json内容转换为Hive支持的文本格式_操作方法说明_01_EvaluteJsonPath处理器---大数据之Nifi工作笔记0031

然后我们再来看一下如何把json内容,转换成hive支持的文本格式,其实还是一个格式转换对吧 首先看一下用到的处理器,可以看到这里我们用到了evaluateJsonPath处理器,这个处理器用来提取json中的熟悉,然后ReplaceText处理器用来替换掉FlowFile中的属性的内容 首先看一下这个Evalua…

【Python-Conda】Conda操作解读 pip 和 conda 的区别

【Python-Conda】Conda操作解读 & conda与pip的区别 文章目录【Python-Conda】Conda操作解读 & conda与pip的区别1. 介绍2. conda 操作2.1 创建环境2.2 查看conda已创建的环境2.3 删除环境2.3.1 删除虚拟环境中的包2.4 激活(失活)环境2.4.1 激活…

OpenAI Embedding:快速实现聊天机器人(三)

theme: orange 本文正在参加「金石计划」 接上文OpenAI Embedding:快速实现聊天机器人(二)有讲到聊天机器人的架构和流程,这篇开始通过代码讲讲具体实现。 前言 这篇文章为了降低实现的难度,下图中提供存储和向量相似度搜索的Redis(Redis Sea…

智媒ai在线伪原创-python文本自动伪原创

文章伪原创工具的优势 文章伪原创工具是一类自然语言处理工具,通过对原始文本进行语言转换、替换、重组等方式,生成与原始文本相似但不完全相同的新文本。这种工具的优势主要包括以下几点: 提高工作效率:使用文章伪原创工具可以快…

第三章 传输层

传输层基本服务 传输层核心任务是为应用进程之间提供端到端的逻辑通信服务传输层主要实现功能:传输层寻址、对应用层报文进行分段和重组、对报文进行差错检测、实现进程间的端到端的可靠数据传输控制、面向应用层实现复用与分解、实现端到端的流量控制、拥塞控制 …

C++中的引用

上一次,我们只是浅浅的提了一下引用‘&’,那么今天,我们就正式减少一下引用,以及引用是什么,还有就是引用和指针的区别,引用的特点 首先,我们回顾一下什么是引用,引用就是取别名…

MapReduce原理

MapReduce 编程规范 MapReduce 的开发一共有八个步骤, 其中 Map 阶段分为 2 个步骤,Shuffle 阶段 4 个步骤,Reduce 阶段分为 2 个步骤Map 阶段 2 个步骤 设置 InputFormat 类, 将数据切分为 Key-Value(K1和V1) 对, 输入到第二步自定义 Map 逻辑, 将第一…

十五周算法训练营——链表专题

今天是十五周算法训练营的第三周,主要讲链表专题,包含:反转链表、移除链表、交换链表、链表相交、删除链表中的倒数第N个节点、环形链表II。(欢迎加入十五周算法训练营,与小伙伴一起卷算法——文章末尾进群&#xff09…

【我的创作纪念日】恒川的创作一周年

机缘 大家好,我是热爱跑步的恒川,今天是个特殊的日子(我的创作纪念日),在去年的今天,我发了第一篇博文。去年的时候,刚接触到CSDN,只想把他当作一个学习的工具,后来&…

Node.js -- Express路由

1.路由的概念 在Express中,路由指的是客户端的请求与服务器处理函数之间的关系。 Express中的路由分为三部分,分别是请求的类型,请求的URL地址和处理函数。格式如下: app.METHOD(PATH,HANDLER)例子如下: // 匹配 GE…

【计算几何3】博物馆问题和相关证明

( gallery problem or museum problem ) Art gallery problem - Wikipedia 一、说明 画廊问题是一个基本的计算几何问题,最现实的反映是,到底对一个场景监视会用到几个摄像头。更深刻的层次是,如何对场景生成地图&am…

C生万物 | 十分钟带你学会位段相关知识

结构体相关知识可以先看看这篇文章 —— 链接 一、什么是位段 位段的声明和结构是类似的,有两个不同: 位段的成员必须是 int、unsigned int 或signed int位段的成员名后边有一个冒号和一个数字 在下面,我分别写了一个结构体和一个位段&…

嵌入式51单片机01-开发版介绍与LED流水灯系列

文章目录1. STC89C52单片机介绍2. 单片机预备知识3. LED灯操作系列1. 点亮LED(1)LED原理图连接方式(2) proteus接线图(3)keil代码2. LED灯闪烁(1)实验电路图(2&#xff0…

每日一题104——转置矩阵

给你一个二维整数数组 matrix, 返回 matrix 的 转置矩阵 。 矩阵的 转置 是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]] 输出:[[1,4,7],[2,5,8],[3,6,9]] 示…

大佬们隔空互怼

阅读本文大概需要 1.14 分钟。1、最近国内各大互联网公司都在掀起一股大模型热潮,要想让这股热潮变得更持久更精彩,离不开互联网大佬们的添砖加瓦。比如上周搜狗的王小川跟百度的肖阳,两位互联网大佬隔空互怼的场景,一度让大家觉得…

时序分析 49 -- 贝叶斯时序预测(一)

贝叶斯时序预测(一) 时序预测在统计分析和机器学习领域一直都是一个比较重要的话题。在本系列前面的文章中我们介绍了诸如ARIMA系列方法,Holt-Winter指数平滑模型等多种常用方法,实际上这些看似不同的模型和方法之间都具有千丝万缕…

SpringBoot中处理日期的两种方式(消息转换器)

在Spring Boot中,我们通常会使用Jackson来序列化和反序列化Java对象到JSON。在进行日期序列化时,我们需要指定日期格式,否则Jackson会使用默认格式,这可能不是我们想要的。要指定日期格式,有两种方式: 如果没有处理按照默认的结果如下图: 所以我们需要通过一些手段来对日期进行…

总结一下Redis的缓存雪崩、缓存击穿、缓存穿透

缓存是提高系统性能的一种常见手段,其中Redis是一种常用的高性能缓存数据库。但是在使用缓存时,可能会遇到一些问题,比如缓存击穿、缓存穿透、缓存雪崩等问题,本文将介绍这些问题的概念、原因以及解决方案。 缓存击穿 缓存击穿指…

Jenkins——用户管理、授权策略配置以及Jenkins安全配置管理

这里写目录标题一、Jenkins用户管理1、进入系统管理界面2、创建用户3、编辑用户信息4、编辑用户信息5、删除用户信息二、Jenkins授权策略配置1、授权策略插件2、安装插件:Role-based Authorization Strategy3、管理角色a、全局角色 Global rolesb、项目角色 Item rolesc、节点角…

CVPR | 达摩院开源自监督学习框架CoKe, 单机8卡可训练

团队模型、论文、博文、直播合集,点击此处浏览 一、论文 论文链接: Unsupervised Visual Representation Learning by Online Constrained K-Means 代码链接:https://github.com/idstcv/CoKe 二、背景 虽然基于instance的自监督学习方法在ImageNet上…