前端打包过大如何解决?

news/2024/10/11 13:25:32/

前端开发完毕部署到线上是,执行npm run build。当打包过大时,部署到服务端后加载缓慢,如何优化?
我们可以通过执行npm run analyze。可以看到各个包文件大小的区别。
当打包过大时,通过压缩gzip的方式,可以看个开始和打包和压缩的大小
在这里插入图片描述
前端打包成gzip,用new CompressionWebpackPlugin来压缩。服务端nginx设置
http{
gzip on;
gzip_static on;
gzip_types text/plain application/x-javascript text/css application/xml;
}


http://www.ppmy.cn/news/1446035.html

相关文章

记录一些容易遗忘的东西

文章目录 native、sync 修饰符this.$nextTick native、sync 修饰符 native :在对子组件使用 click 的时候若不使用该修饰符,那么就不能执行点击事件,会被判断为子向父组件传的值sync : 类似于 v-model 的响应式修饰符&#xff0c…

Java同时使用@RequestBody和@RequestParam传参在postman中执行请求报错:Unsupported Media Type

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

Nginx 搭建Web服务

题目: 1.web服务器的主机ip:192.168.78.128 2.web服务器的默认访问目录为/var/www/html 默认发布内容为default‘s page 3.站点news.timinglee.org默认发布目录 为/var/www/virtual/timinglee.org/news 默认发布内容为 news.timinglee.org 4.站点login.t…

Llama images - 记录我看到的那些羊驼

来自 : DREAM: Distributed RAG Experimentation Framework

基于Java-jsp的现代数字化城市公交查询系统论文(四)

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️ ➡️点击免费下载全套资料:源码、数据库、部署教程、论文、答辩ppt一条龙服务 ➡️有部署问题可私信联系 ⬆️⬆️⬆️​​​​​​​⬆️…

Python搭建http下载服务器

import http.server import socketserverPORT 8002Handler http.server.SimpleHTTPRequestHandlerwith socketserver.TCPServer(("", PORT), Handler) as httpd:print("serving at port", PORT)httpd.serve_forever()使用: 保存为httpserver.…

嵌入式MCU和SOC的区别?

你大概率并不知晓嵌入式 MCU 与 SOC 之间的区别吧?从表面上来看,MCU 指代的是嵌入式微控制器,而 SOC 则代表着片上系统,这仿佛仅仅是嵌入式系统的不同称谓罢了。然而,在实际的研发以及产品设计过程中,你将会…

Qt下载地址与版本选择指南

为了方便下载Qt不迷路,也为了大家选择适合自己的Qt版本,特此列举一下常用的版本和下载地址。 目前本人常用5.12.12版本。 Qt4的最后一个版本:4.8.7 下载地址 最稳定最经典的版本,如果是qt4的其他版本,强烈升级到次版…