vue项目打包之后文件太大怎么优化

最新推荐文章于 2024-09-03 09:14:50 发布
最新推荐文章于 2024-09-03 09:14:50 发布
阅读量8.7k 收藏 14
点赞数 1
分类专栏： js vuecli vue 文章标签： vue项目打包后文件太大 vue项目优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/89523810
版权
js 同时被 3 个专栏收录
68 篇文章 4 订阅
订阅专栏
vue
29 篇文章 0 订阅
订阅专栏
vuecli
2 篇文章 0 订阅
订阅专栏

首先，用脚手架进行打包分析，如果使用webpack的就要自己找插件了，vue-cli内置了打包分析插件

执行命令 npm run build --report

打包完成之后就会自动在浏览器打开127.0.0.1:8888地址

然后就可以看到项目所用的依赖占比了。

然后把占比，或者说占面积比较大的依赖抽出来，改用cdn的方式引入就可以减小文件的大小了。

当然也可以用一下路由懒加载来分割文件，减小体积

https://blog.csdn.net/woshidamimi0/article/details/93190512

或者叫后端小伙伴开启文件压缩

https://blog.csdn.net/woshidamimi0/article/details/98350032

 

woshidamimi0
关注
专栏目录
解决Vue项目打包后文件过大问题
weixin_39964419的博客
10-11 1万+
首屏加载时间优化
vue项目打包后文件过大怎么办，如何优化加载速度
前端
12-25 1万+
路由懒加载 const Home = () => import('./views/Home.vue'); const MyInfo = () => import('./views/MyInfo.vue'); 在.babelrc中 "plugins": ["@babel/plugin-synt
Vue多页面配置打包性能优化（解决加载包太大，加载慢问题）
会点php的前端小渣渣
09-25 5151
通常我们使用vue-cli开发多页面的时候，不知道您是否注意一个问题没有？ 默认情况：webpack 会将多入口通用的组件库等，打包一个 vendor 的 chunk js 中 现在假设有两个页面： 入口 admin 使用到了element-ui组件库和echarts图表库，入口 index 使用了iview的组件库 #一、问题描述及解决方案 #1. 多入口存在的问题 那么这样就会存在问题： 打出来的chunk-vendor.xxxx.js会包含element-ui和echarts和...
Git-Review 使用教程
最新发布
gitblog_01132的博客
09-03 451
Git-Review 使用教程 git-reviewAn interactive shell for reviewing diffs in a git repository.项目地址:https://gitcode.com/gh_mirrors/gi/git-review 项目介绍 Git-Review 是一个用于简化将 Git 分支提交到 Gerrit 进行代码审查过程的工具。它最初由 Fac...
如何让vue项目打包出来之后更加小巧？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-28 4917
在config/index.js中的build下面找到productionSourceMap设置为false，cnpm run build试试看就发现文件小很多了
vue打包之后文件过大
weixin_38673922的博客
08-03 419
一、vue路由懒加载 二、取消生成map文件，找到config/index.js ，修改为false 三、在index.html中，通过cdn引入库文件 四、按需引入
vue-cli项目中静态文件过大的问题
weixin_43844392的博客
04-23 3298
我们最近在做一个项目时，因为static 文件中含有几个视频文件，导致static 文件过大，build 的时候非常慢。 在这我大概介绍一下上面问题的解决方法： 首先我们先要了解一下 webpack 的一个插件 --拷贝插件 copy-webpack-plugin 第一步：插件的安装： npm install --save -dev copy-webpack-plugin 如果你是用脚手...
使用vue打包时vendor文件过大或者是app.js文件很大的问题
12-09
在使用vue-cli脚手架打包后（UI用的Element-ui），发现vendor文件很大，将近1M左右。。后来翻阅资料才明白，原来webpack把所有的库都打包到了一起，导致文件很大。 我的解决办法：  1、把不常改变的库放到index....
vue项目打包优化.zip
05-02
在Vue.js项目开发中，优化打包过程至关重要，它不仅能提高应用的加载速度，还能提升用户体验。Vue项目的打包优化主要包括以下几个方面： ### 1. **配置Webpack** Webpack是Vue项目常用的构建工具，通过优化其配置...
解决vue-cli脚手架打包后vendor文件过大的问题
01-19
这一般是你打包的vendor太大的缘故。如果你打包后看到你的vendor文件有700kb以上。你就要考虑怎么处理。 处理这种文件的 1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样： [removed][removed] ...
记录一次vue项目打包后文件过大的优化过程
Yoohhal
11-25 659
目录 echarts按需引入（212.61KB -> 89.89KB） iview按需引入（128.94KB -> 5.83KB） 弃用moment.js，采用day.js（100+KB -> 2KB） Element-UI按需引入（154.23KB -> 64.69KB） ali-oss采用cdn引入（100+KB -> 0） 删除 / 替换部分svg图标 最近刚好比较有空，处理了一下网站首屏加载过慢的问题，做了诸如：路由懒加载、gzip压缩等一系列配置处理，效
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
11-21
问题 由于这次项目是在初学 Vue 之后的第一个正式项目，没有考虑到类似 路由懒加载、 按需加载的问题 ，所以呢，也算是没经验。 到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。 优化前： app.js 2.3MB vendor.js 2.4MB vendor.css 612kB app.js.map 9.13MB vendor.js.map 16.21MB //不一一列举.... 优化 接下来看看优化方法。 优化步骤1： 不生成.map文件 在 webpack.prod.cong.js 文件下，修改配置项 sourceMap 设置为 false 或者删除：
快速解决Vue项目打包后文件过大问题
热门推荐
qq_19666289的博客
07-10 2万+
快速解决Vue项目打包后文件过大问题为什么打包后文件过大？如何快速解决一、路由懒加载【使用es提案的import()方式】二、cdn引入依赖合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的...
vue解决打包后文件过大的问题-使用压缩插件打包后压缩文件-compression-webpack-plugin
浩星
06-29 2786
前言： 在用vue开发项目的时候，经常会面临一个文件，就是打包以后文件太大，首页加载时间长的问题，一般我们会从压缩文件，cdn引入文件，加载整合雪碧图等等的方式来优化，这里来谈谈压缩文件，主要使用的插件：compression-webpack-plugin 压缩文件优点： 1，打包后页面加载速度变快（文件都小了） 2，打包完的文件会把我们需要的体积比较大的文件根据功能界面拆分开 比较：很明显的感觉文件变多了，每一个的体积变小了 压缩前： 压缩后： ...
vue-cli3 webpack打包优化，提升网站性能
Lotus的博客
06-18 1158
最近为了提升网站性能，考虑了一下打包优化。加载包越小，服务器响应越快。webpack这个打包神器，研究得还不够透彻。于是学习一下。 打包优化，一般从以下几个方面考虑： 一、代码压缩 1.去掉.map文件 .map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了.map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 操作： module.exports = { // ... productionSou...
解决vue项目打包后文件过大导致首屏加载30s+的问题
sinat_40914914的博客
03-12 1501
依赖 vue v2.6 axios+tailwindcss+element-ui+... 文件打包情况 File Size Gzipped dist/js/chunk-vendors.fb40d429.js 1205.36 KiB 337.06 KiB dist/js/album~articleAdd~articleEdit.84528c7c.js 69.05 KiB
vue中封装自动计算比例滑块
ju__ju的博客
08-14 619
vue中封装自动计算比例滑块
webpack3 打包vue项目导致入口文件APP.JS体积过大
qq_37550440的博客
06-26 2866
webpack3 打包vue项目导致app体积过大 1.优化 devtool 中的 source-map2.剥离css文件，单独打包3.使用 UglifyJSPlugin 压缩。 4.提取公共依赖5.开启gzip压缩7.不打包第三方库8.路由懒加载
Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
03-06 2372
Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
jeecg vue2项目打包加载太慢
05-25
Jeecg Vue2 项目打包加载慢的原因可能有多种： 1. 项目依赖过多，导致打包文件体积过大。可以通过精简依赖、按需加载依赖等方式减小打包文件体积。 2. 没有进行代码分割。可以通过动态导入组件、路由懒加载等方式实现代码分割，提高页面加载速度。 3. 服务器带宽或硬件配置不足。可以考虑升级服务器或使用CDN等方式优化服务器性能。 4. 图片、视频等资源文件过大。可以通过压缩图片、使用视频压缩技术等方式减小资源文件体积。 5. webpack 打包时使用了较低的压缩比例，导致打包文件过大。可以在 webpack 配置文件中设置合适的压缩比例。 综上所述，优化 Jeecg Vue2 项目打包加载速度可以从多个方面入手，根据具体情况进行针对性的优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值