Vue项目解决app.js和chunk-vendors.js文件过大导致响应慢

最新推荐文章于 2024-07-02 13:38:45 发布
最新推荐文章于 2024-07-02 13:38:45 发布
阅读量4.6k 收藏 13
点赞数 1
分类专栏： nginx vue js问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41695498/article/details/119783267
版权

1、路由配置由原先的import更改为下面情况 因为import会一次性全部加载完 那样会影响很多

// import backPage from '../views/backPage.vue';
const backPage = resolve => require(['../views/backPage.vue'],resolve);

// import own from '../views/own.vue';
const own = resolve => require(['../views/own.vue'],resolve);

// import ranking from '../views/ranking.vue'
const ranking = resolve => require(['../views/ranking.vue'],resolve);

// import institutions from '../views/institutions.vue'
const institutions =<
最低0.47元/天 解锁文章
程序员小宋
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue3 - 打包后chunk-vendors.js文件很大导致页面加载很慢、页面白屏、解决方案，如何解决vue3+vue/cli-service打完包vendors.js太大导致加载非常慢（完美解决
高级前端工程师
03-08 3204
vue3，chunk-vendors.js，build打包后加载太慢，打包后页面一直加载不出来，build打包完毕chunk-vendors.js文件特别大加载很慢怎么办，如何解决vue-cli打包后vendors.js，解决vue打包后vendor.js文件过大问题，使用vue打包时vendor文件过大，build包太大导致首屏过长的解决方案，解决vue-cli脚手架打包后vendor文件过大的问题，vue打包时，chunk-vendors.js文件过大怎么优化，首页加载慢问题，解决vue打包chunk-
Vue 打包 chunk-vendors(3)
2401_84435866的博客
04-29 370
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。
使用vue打包时vendor文件过大或者是app.js文件很大的问题
12-09
第一次使用vue2.0开发，之前都是用的angular1.x。在使用vue-cli脚手架打包后（UI用的Element-ui），发现vendor文件很大，将近1M左右。。后来翻阅资料才明白，原来webpack把所有的库都打包到了一起，导致文件很大。 我的解决办法：   1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样： 然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代码 externals: { 'vue': 'Vue', 'vue-router': 'VueRouter',
前端性能优化：Vue项目打包后app.xxx.js 和 chunk-vendors.xxx.js 文件太大，导致页面加载时间太长
前端笔记——放弃很容易,但坚持一定很酷
02-01 3062
5、修改nginx配置之后，需要重启nginx生效，然后去页面清空浏览器环缓存后查看，app.js 和chunk-vendors.js 两个文件变成了 884kB 和642 kB，大小和加载时间都有明显的下降。3、 修改后，先本地 npm run build 打包，打包成功后，看下包里的js文件中是否包含 .gz 结尾的文件，如果包含就可以把包部署到相关环境上。问题场景，如下图，环境上的 app.js 和chunk-vendors.js 两个文件大小，高达3.4M 和 2M ，加载所耗费的时间也很长。
chunk-vendors.js 优化
最新发布
valsedefleurs的博客
07-02 481
本文介绍先拆分后压缩的方式优化 `chunk-vendors.js`，减少 `FCP` 首屏加载时常
Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
03-06 2251
Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
chunk-vendors.592ff42a.js
03-09
unapp h5 js插件
解决！！前端项目打包后生成的chunk-vendors文件过大，导致加载太慢
热门推荐
weixin_43850586的博客
01-09 5万+
话不多说，直接使用插件解决这个问题！ 第一步：先下载这个插件 npm install --save-dev compression-webpack-plugin 第二步：修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码 const path = require('path'); const webpack = require...
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项目chunk-vendors.js、app.js文件太大
qq_36070088的博客
01-07 3975
vue项目chunk-vendors.js、app.js文件太大，优化首屏加载，解决方案
如果在解决完vue打包chunk-vendors.js文件过大的问题后，浏览器首次加载依旧缓慢，为了提升用户体验，可以添加首屏加载中...的样式，步骤和代码如下：
weixin_54193181的博客
07-06 436
如果在解决完vue打包chunk-vendors.js文件过大的问题后，浏览器首次加载依旧缓慢，为了提升用户体验，可以添加首屏加载中...的样式
vue2.0前端项目打包后生成的chunk-vendors文件过大加载太慢解决方案
baifucn的专栏
12-28 3166
不多说，直接使用插件解决这个问题！ 第一步：先下载这个插件 npm install --save-dev compression-webpack-plugin 第二步：修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码 const path = require('path'); const webpack = require('webpack') const CompressionWebpackPlugin = require
Vue 打包 chunk-vendors
2401_84435866的博客
04-29 351
2.6 MB不要看后面的Time时间那么短，因为这是内网本机访问快，如果到了外网就跟服务器带宽、性能有关了，但是文件这么大，加载慢，那就需要拆开来进行分块加载，不是一味升级服务器解决问题，毕竟要钱的！附带还未进行分块分包加载时，打包得到的文件目录(jscss。
Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
糜家智の博客
01-03 5463
Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
vue项目优化——页面加载缓慢 chunk-vendors.js 文件过大
weixin_41844824的博客
09-13 2572
在开发项目时引入过多的插件时，容易导致项目打包后chunk-vendors.js文件过大，导致浏览器加载慢的问题。
vue项目打包上线chunk-vendors.js文件过大导致页面加载缓慢解决方案
LD喂！的博客
09-29 2万+
最近做一个vue项目遇到了一个问题，项目打包上线发现chunk-vendors.js文件也太大了点，第一次加载页面需要将近30s，这肯定是无法容忍的，于是‘调研’了一番，记录下解决方法 在vue.config.js中添加 const path = require('path'); const webpack = require('webpack') const CompressionWebpackPlugin = require('compression-webpack-plugin') const pr
webpack Vue前端项目打包后生成的chunk-vendors文件过大，导致加载太慢,生成的js文件过多，http请求太频繁问题解决
sunshu123456的博客
08-27 1万+
WebPack压缩打包 1、安装压缩插件 npm install --save-dev compression-webpack-plugin 2、修改vue.config.js配置文件 引用插件 const CompressionWebpackPlugin = require('compression-webpack-plugin') //引入插件 const productionGzipExtensions = ['js', 'css'] //压缩js 和css文件 配置压缩 co
Vue 打包后 vendor.js 体积太大，解决加载速度慢问题
S筱潇S四维Smile
09-12 6317
在 Vue 项目中，引入到工程中的所有 js、css 文件，编译时都会被打包进 vendor.js，若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方案：将引用的外部 js、css 文件剥离出来，不编译到 vendor.js 中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将 vendor.js、外部的 js 等加载下来，达到首次打开加速的目的。 推荐外...
vue.config.js 怎么配置分割chunk-vendors.js和app.js代码大小
05-26
可以通过在 `vue.config.js` 中的 `configureWebpack` 选项中配置 `optimization` 来实现分割 `chunk-vendors.js` 和 `app.js` 代码大小。 以下是一个示例配置： ```javascript module.exports = { configureWebpack: { optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, name: 'chunk-vendors', chunks: 'all', priority: -10, enforce: true }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }, runtimeChunk: { name: 'app' } } } } ``` 其中，`cacheGroups` 中的 `vendors` 配置项是用来分割 `chunk-vendors.js` 的，`default` 配置项是用来分割 `app.js` 的。 `test` 选项指定了匹配的模块，这里是所有在 `node_modules` 中的模块。 `name` 选项指定了生成的文件名。 `chunks` 选项指定了哪些代码块需要被分割，这里是所有的代码块。 `priority` 选项指定了分割的优先级，数值越大优先级越高。 `enforce` 选项指定了是否强制执行分割。 `minChunks` 选项指定了一个模块被引用的次数，只有超过这个次数才会被分割。 `runtimeChunk` 选项指定了是否将 `webpack` 的 `runtime` 代码单独分割出来，这里是将 `runtime` 代码分割到 `app.js` 中。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值