Vue 打包 chunk-vendors

最新推荐文章于 2024-07-02 13:38:45 发布
最新推荐文章于 2024-07-02 13:38:45 发布
阅读量357 收藏 6
点赞数 4
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84435866/article/details/138298202
版权
本文介绍了如何在Vue项目中优化打包过程，特别是针对chunk-vendors的拆分和压缩。通过compression-webpack-plugin插件，实现了.gz和.br格式的文件压缩，以提升加载速度。同时，提到了将第三方包分开打包以减少主文件大小，以及前端配置中对第三方包的处理。此外，还强调了学习前端基础知识如HTML5、CSS、JavaScript的重要性，并推荐了相关书籍。
摘要由CSDN通过智能技术生成

image.png

  • npm i element-ui -S，安装完打包后瞬间到了 2.6 MB！

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

image.png

  • 不要看后面的 Time 时间那么短，因为这是内网本机访问快，如果到了外网就跟服务器带宽、性能有关了，但是文件这么大，加载慢，那就需要拆开来进行分块加载，不是一味升级服务器解决问题，毕竟要钱的！

  • 附带还未进行分块分包加载时，打包得到的文件目录(js、css)

image.png

image.png

最低0.47元/天 解锁文章
2401_84435866
关注
专栏目录
chunk-vendors.592ff42a.js
03-09
unapp h5 js插件
Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
热门推荐
卡尔特斯
08-24 3万+
一、chunk-vendors.js 简介 顾名思义，chunk-vendors.js 是捆绑所有不是自己的模块，而是来自其他方的模块的捆绑包，它们称为第三方模块或供应商模块。 通常，它意味着（仅和）来自项目 /node_modules 目录的所有模块，会将所有 /node_modules 中的第三方包打包到 chunk-vendors.js 中。 将所有的第三方包集中到一个文件，自然也会出现文件过大的问题。 二、chunk-vendors.js 文件大小分析 新创建一个 vue 项目，
前端项目时因chunk-vendors过大导致首屏加载太慢，Vue Build时chunk-vendors的优化方案...
zhangzhiping35的专栏
08-03 3549
1、compression-webpack-plugin插件打包.gz文件 安装插件 也可以指定版本我这里下载的是1.1.2版本的，试过更高的版本会有ES6语法的报错，因为我node使用的是v12，如果node版本更高可以尝试更高版本 npm install --save-dev compression-webpack-plugin npm install --save-dev co...
项目（Vue2）在打包时chunk-vendors.js文件过大问题
m0_45182947的博客
01-16 3588
Vue打包完毕后首屏加载过慢
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.xxx.js
xiaonankeji的博客
04-02 8912
项目在第一次加载时响应很慢，打开控制台会发现，chunk-vendors.xxx.js和chunk-vendors.xxx.css体积较大，占用了大量时间。chunk-vendors.xxx.js保存的是相关依赖的文件，如vue、vue-router、view-design等。 一、按需引入依赖，删除package.js中不用的依赖，这里我们不用国际化，故删除vue-i18n。 二、区分开发依赖和线上依赖。 package.js有dependencies和devDependencies两处放置依赖的位置。
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
12-02
前言：最近用vue-cli 3.0 构建一个小型的工单管理系统，完工后build发现一个chunk-vendors包就达到985kb，加上其他一些资源文件，首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢！ 根据首屏加载...
解决vue-cli脚手架打包后vendor文件过大的问题
01-19
大家会遇到打包后文件很大，导致页面初始化加载的速度很慢。会出现白屏的现象。这一般是你打包的vendor太大的缘故。如果你打包后看到你的vendor文件有700kb以上。你就要考虑怎么处理。 处理这种文件的 1、把不常改变...
解决vue打包后vendor.js文件过大问题
10-16
总结来说，解决Vue打包后vendor.js文件过大问题的关键在于减少被打包进vendor.js的库的数量，通过CDN引入、配置Webpack排除依赖、使用Vue插件以及利用懒加载等策略，可以有效提升项目的加载性能和用户体验。...
解决vue打包后刷新页面报错：Unexpected token <
10-16
在使用Vue.js框架开发的项目中，打包后的静态文件部署到生产环境中时，遇到了页面刷新后报错“Unexpected token <”的问题。这个问题表明在解析index.html或者发生错误的页面时，解析器遇到了一个不符合预期的字符...
vue-cli 打包后提交到线上出现 “Uncaught SyntaxError:Unexpected token” 报错
01-21
前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console...
vue性能优化之build后包体积太大（1）
会点php的前端小渣渣
10-15 3464
基于vue-cli3.0构建项目，npm引入多个第三方包。build之后，包体积太大导致首屏过长。----毫无体验感！！！ 实践的项目喜欢捣鼓可以clone下来 只总结了亲测效果明显的几种方案，解决方案大多来自于日常总结及各路大佬，如有不足，请大佬补充~ 1、路由懒加载 在 Webpack中，我们可以使用动态 import语法来定义代码分块点 (split point)： import('./About.vue') // 返回 Promise 如果您使用的是 Babel，你将需要添加.
Vue 打包 chunk-vendors，30分钟轻松入门flutter，web开发实战
03-19 374
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
chunk-vendors.js 优化
最新发布
valsedefleurs的博客
07-02 529
本文介绍先拆分后压缩的方式优化 `chunk-vendors.js`，减少 `FCP` 首屏加载时常
【vue加载16秒优化到2秒】Vue3加载慢的性能优化，打包后页面静态资源chunk-vendors文件过大加载慢响应慢
赏樱看雪撸代码
12-12 1万+
vue构建后首页加载慢，vue首页加载特慢优化，vue3响应慢优化，vue页面加载慢优化，如何解决chunk-vendors.js文件大加载慢，如何优化vue加载慢，如何减少vue打包文件大小.
vue打包时，chunk-vendors.js文件过大怎么优化
小强崽的博客
04-10 3978
使用工具分析代码，找出未使用的第三方库，并将其移除，从而减小。文件过大的优化方式，其中第三种方式是比较常用的方式。将一些重复引用的代码抽离成公共模块，避免代码冗余。将第三方库按需引入，避免将整个库都打包进。将一些体积较大且不经常更新的第三方库（如。等）使用 CDN 引入，这样可以减小。
项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包，从而减少首屏加载时间
盏茶作酒的博客
06-24 434
文件大的原因其实就是，我们把第三方的包都打包在这一个文件上了，都糅在一块，肯定大啊，所以想办法把其做一个拆分。文件中加入以下代码。代码大家直接复制粘贴即可使用，也是笔者自己在生产环境中使用的哦。我们项目做完，验收通过以后，就需要打包发布上线啦。，即为：不是自己写的模块包，也就是。项目目录的所有模块包。chunk(块/包)我们以vue为例，在。
优化vue打包chunk-vendors.js 过大
LJJONESEED的博客
09-14 4989
vue打包的时候chunk-vendors.js文件很大，导致首次加载页面比较慢；
Vue的组件化
2401_84446548的博客
04-29 223
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】Right总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
vue ie chunk-vendors 语法错误
09-03
Vue 中的 `ie chunk-vendors 语法错误` 错误通常是由于在 IE 浏览器中加载 Vue 项目时引发的，原因是 IE 浏览器对一些 ES6 的语法特性不支持。为了解决这个问题，你可以尝试以下几种方法： 1. 在 `babel.config.js` 文件中配置 `@babel/preset-env` 插件，将其设置为兼容 IE 的配置。在 preset-env 的 targets 选项中指定兼容的浏览器版本，例如：`targets: { ie: 11 }`。这样 Babel 会自动将 ES6 语法转换为兼容 IE 浏览器的 ES5 语法。 2. 检查你的项目依赖和插件是否有兼容性问题。有些第三方库或插件可能使用了不被 IE 支持的语法特性，因此你需要检查这些依赖并查找替代方案或修改代码以使其兼容。 3. 使用 polyfill（垫片）填充缺失的功能。Vue 提供了 `@babel/preset-env` 配置中的 `useBuiltIns` 选项，可以根据你的需要自动导入所需的 polyfill。在 `babel.config.js` 文件中配置：`"useBuiltIns": "usage"`，这样 Babel 会根据你代码中使用的 ES6 语法特性自动导入所需的 polyfill。 4. 如果你使用的是 Vue CLI 创建的项目，在 `vue.config.js` 文件中可以添加如下配置： ```javascript module.exports = { transpileDependencies: ['vue'], } ``` 这将将 Vue 的源代码转译为 ES5 语法，以确保兼容 IE 浏览器。 总之，要解决 `ie chunk-vendors 语法错误` 错误，你需要配置 Babel 来处理 IE 不支持的语法，检查项目依赖和插件兼容性，使用 polyfill 填充缺失的功能，并可能进行其他相关配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值