vue cli3.x development模式打包app.js包太大

最新推荐文章于 2024-10-11 16:41:58 发布
置顶 最新推荐文章于 2024-10-11 16:41:58 发布
阅读量1.4w 收藏 7
点赞数 4
分类专栏： vue-cli webpack 文章标签： vue cli 3.x vue cli 3.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39953537/article/details/83586004
版权

一、背景：升级老项目遇到的问题
1.项目目录
在这里插入图片描述
2.package.json
在这里插入图片描述
3. env配置
.env.development 配置

NODE_ENV=development
VUE_APP_BASE_API=开发
VUE_APP_BUCKET=开发

.env.production配置

NODE_ENV=production
VUE_APP_BASE_API=生产
VUE_APP_BUCKET=生产

4.执行npm run build:dev
打包后，发现app.js 有十几兆，上传到服务器，根本无法打开（时间太久）
在这里插入图片描述

二、解决方式（暂时能解决的，有可能还有更好的办法）
1.在根目录下新建.env.dev文件
配置如下（内容和.env.development文件一致，NODE_ENV改为production）

NODE_ENV=production
VUE_APP_BASE_API=开发
VUE_APP_BUCKET=开发

2.修改package.json
在这里插入图片描述

3.执行npm run build:dev
发现分包，压缩都可以了
在这里插入图片描述

4.原理其实是借用production模式来载入开发的环境变量

解决Vue项目打包后文件过大问题
weixin_39964419的博客
10-11 1万+
首屏加载时间优化
vue.js开发外卖App项目的组件拆分总结(五)
初漾的博客
10-08 2440
static目录下css中有reset.css文件，开发一个前端页面，需要将一些标签默认页面reset掉。采用的是http://cssreset.com官网提供的样式。在入口文件:index.html中引入reset.css文件，还有移动端的视口不能缩放，有个初始的宽和高设置， 可以通过配置eslintrc.js文件修改一些规则，比如：indent:0表示关于空格的规则取消。 在eslint
解决vue-cli脚手架在dev模式下app.js过大的问题
bool的博客
04-29 2721
解决vue-cli脚手架在dev模式下app.js过大的问题 在开发后台管理系统的时候，devServer部署在服务器端，devServer启动后每次的app.js非常大，达到了36M，每次打开后台管理系统的时候非常慢，下面介绍两种方法来解决： 1.启动devServer的GZIP压缩 devServer: { port: 3000, compress: true, #启动...
vue3打包配置
最新发布
yangyanqin2545的博客
10-11 465
4、有时候我们项目中会用到其他应用的地址，但是该应用的地址是不确定的，因此需要将该动态的地址放在public文件夹中，该文件夹中的东西是不参与打包的，我们可以方便快捷的修改打包后文件，快速部署应用。（1）将路由模式修改为history，将路由模式修改为history模式时，正常访问是没有问题的，但当界面刷新时，会出现404的问题，该问题需要后端配合。由于在本地开发和线上部署的环境，需要请求的地址前缀是不一样的，所以需要在各自的环境文件中去进行配置，（3）获取配置变量函数。3、环境文件中的配置。
解决vue-cli3打包后文件太大加载慢的问题
weixin_45653816的博客
03-10 1724
一、配置vue 1.安装compression-webpack-plugin插件 npm i -D compression-webpack-plugin@3.0.0 2.在vue.config.js中添加如下配置 // 导入compression-webpack-plugin const CompressionWebpackPlugin = require('compression-webpack-plugin') // 定义压缩文件类型 const productionGzipExtensions =
Vue项目打包文件过大（优化）
良_123的专栏
01-05 5097
问题 Vue项目打包文件过大，项目加载慢，前端可以做哪些优化？ 分析 其实，这是项目的性能优化，一般在项目开始开发之前就应该考虑，但在实际开发中，开发之前会被忽略。 解决方案如下 一、懒加载 什么叫懒加载？在需要的时候进行加载，随载随用。 常见的有：路由、图片等。 例子：官方路由懒加载 { path: "/timeAxis", name: "timeAxis", component: () => import ('@/views/xxx'), }
vue cli 3.x 项目部署到 github pages的方法
10-17
Vue CLI 3.x 是 Vue.js 开发环境的脚手架工具，它简化了构建 Vue 应用的过程。本文将详细讲解如何将 Vue CLI 3.x 项目部署到 GitHub Pages 上，以便于展示或分享你的纯静态项目。 1. **关于 GitHub Pages** GitHub...
vue-cli 3.x 项目打包配置-vue.config.js
pamerely的博客
04-14 4168
这里写自定义目录标题前言npm run build配置-package.json.env.dev文件.env.prod文件vue配置文件-vue.config.js路由改成hash模式-router.js插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图...
浅谈vue-cli 3.0.x 初体验
08-27
Vue CLI 3.0.x 是一个重要的升级，它带来了许多改进和优化，使得Vue.js项目的构建过程更加便捷和高效。相较于Vue CLI 2.x，3.0.x版本引入了更简洁的目录结构、更快的初始化速度以及更强大的配置选项。 首先，Vue ...
详解vue-cli3多环境打包配置
10-17
Vue CLI 3 是 Vue.js 官方提供的一个脚手架工具，用于快速搭建 Vue.js 应用。在实际开发中，我们通常需要针对不同的环境（如开发环境、测试环境、生产环境）进行不同的配置，例如 API 接口地址、日志级别等。Vue CLI...
vue项目webpack打包app.js文件太大导致首次加载非常缓慢的解决方案
YanGo的博客
06-05 1万+
对于初学者接触vue项目的时候，一些小项目可能没注意到这一点。对于中大型的项目，打包出来的app.js都有好几M了，导致首次加载的时候非常缓慢，我因为公司需求而急于接收的vue的项目就遇到这个问题，搜索了很多童鞋的方案，大家都比较推荐gzip静态资源压缩，这个需要结合服务器端的配置。 首先打开/config/index.js文件 但是先别急于动手安装，因为 npm install --sa...
Vue进阶（环境变量 和 模式切换）（npm run dev与npm run serve的区别）
qq_41765777的博客
11-20 1万+
1、开发环境与生产环境切换 （1）根目录下新建 .env.dev文件和.env.prod环境变量文件如下： .env.dev文件 (开发环境模式下使用的环境变量） NODE_ENV = development VUE_APP_BASE_API = http://localhost:8088/api VUE_APP_BASE_IMG_URL = http://localhost:8088 .env.prod文件（生产环境模式下使用的环境变量） NODE_ENV = production VU
vue2打包上线优化传输
Jizongjizong的博客
07-25 350
打包上线vue2并且优化传输
Development模式是如何运作的？
前端技术小哥
08-09 1203
原文：https://overreacted.io/how-does-the-development-mode-work/译者：前端技术小哥如果您的JavaScript代...
vue[打包chunk-vendors.xxx.js文件过大，vue项目性能优化解决方案，前端性能优化知识总结]
热门推荐
墨水白云的博客
09-09 2万+
虽然看上去这个内容也就2M左右的大小，但是在线上却出现需要加载10几秒的时间，这对于一个项目来说是非常的有问题的。因此解决方式如下： 首先得知道为什么这个文件比较大，chunk-vendors.xxx.js是一个保存着各种相关依赖的关系的文件，比如导入的elmentUI、echarts、vue、vue-router等各种依赖 解决方案： 1.开启Gzip压缩 2.路由懒加载 3.检查图片等大小，看看能不能对加载的图片进行优化 // 使用webpack-bundle-analyzer检查打包加载的各种依赖大.
解决vue-cli npm run build之后vendor.js文件过大的问题
博客
11-22 2万+
问题       vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓
vue-cli打包 vendor文件 或app.js文件 过大
技术改变世界
10-15 1665
使用vue-cli脚手架打包后（UI使用的是Element-UI），发现vendor.js 文件很大，将近5M之多。文件 过大会导致浏览器加载过慢，及其影响用户的体验。下面提供几种方式来解决此问题 把不常改变的库放到index.html中，通过cdn引入比如 中间会发现bootcss提供的cdn并不稳定，老是访问不了导致项目崩溃，这里推荐两个比较稳定的 CDN jsdelivr 和 unpk...
vue-cli 3.0版本webpack打包
宅神的博客
11-21 1万+
新项目使用了vue-cli 3版本，发现项目中没有build目录，看了vue-cli文档后，大致清楚了如何修改 首先在package.json同级目录下创建新文件vue.config.js vue.config.js中的内容会覆盖默认的打包配置 function resolve(dir) { return path.join(__dirname, dir) } module.expor...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaofei0627

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值