vue 打包时vendor太大

最新推荐文章于 2024-05-13 16:27:36 发布

前端zhou

最新推荐文章于 2024-05-13 16:27:36 发布

阅读量2.9k

点赞数 1

分类专栏：技术 html webpack vue

本文链接：https://blog.csdn.net/qq_39339339/article/details/82185131

版权

技术同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

打包时出现这些module，查了一下都是webpack包所依赖的包，怎么缩小体积，目前是500k

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端zhou

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 打包时vendor太大

打包的report打包时出现这些module，查了一下都是webpack包所依赖的包，怎么缩小体积，目前是500k
复制链接

扫一扫

专栏目录

vue项目优化打包后的vendor.js

天边逐云

07-23

2486

一般使用webpack创建的vue项目，使用插件越多，打包后vendor.js引入会越大，加载越慢本文优化原理为：项目内直接引用插件，无需进行import等操作，以阻止编译包越大看代码： 1、项目内直接引用资源 <script src="/static/es6-promise.auto.js"> </script> <script src="/static/axios/axios.min.0.19.2.js"&g...

Vue 打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）

卡尔特斯

08-24

1万+

主篇 Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案。根据主篇内容继续通过 compression-webpack-plugin 插件处理 chunk-vendors.js 文件过大的问题。创建 vue.config.js 文件，后续配置都需要用到配置文件。前端将文件打包成 .gz 文件，然后通过 nginx 的配置，让浏览器直接解析 .gz 文件，可以大大提升文件加载的速度。安装插件 npm 安装 // 安装报错的话看下面注释，用下面的版本..

参与评论您还未登录，请先登录后发表或查看评论

vue打包时，chunk-vendors.js文件过大怎么优化

小强崽的博客

04-10

3888

使用工具分析代码，找出未使用的第三方库，并将其移除，从而减小。文件过大的优化方式，其中第三种方式是比较常用的方式。将一些重复引用的代码抽离成公共模块，避免代码冗余。将第三方库按需引入，避免将整个库都打包进。将一些体积较大且不经常更新的第三方库（如。等）使用 CDN 引入，这样可以减小。

最新发布

2401_84619145的博客

05-13

618

第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。时间那么短，因为这是内网本机访问快，如果到了外网就跟服务器带宽、性能有关了，但是文件这么大，加载慢，那就需要拆开来进行分块加载，不是一味升级服务器解决问题，毕竟要钱的！

优化vue打包chunk-vendors.js 过大

LJJONESEED的博客

09-14

4881

vue打包的时候chunk-vendors.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 项目，

使用vue打包时vendor文件过大或者是app.js文件很大的问题

10-18

主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

解决vue打包后vendor.js文件过大问题

10-16

主要介绍了解决vue打包后vendor.js文件过大问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

解决vue-cli脚手架打包后vendor文件过大的问题

10-17

这使得Webpack在打包时会认为这些库是全局变量，不会将它们打包进bundle文件中。其次，实现路由的懒加载也是一种有效的优化方法。在Vue Router的配置中，可以对每个路由组件进行懒加载，只在实际访问该路由时才...

vue打包后chunk-vendors太大解决方式

weixin_44643019的博客

01-14

1416

vue打包后chunk-vendors太大解决方式

使用vue打包，vendor.js文件太大的解决方式

lotte

01-11

1万+

首先查看引用资源例如echarts提取到index.html中cdn引入其次常用vue+vueRouter+axios+vuex+elementUI 避免打包然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代码 externals: { 'vue': 'Vue', 'vue-router': '...

解决！！前端项目打包后生成的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-cli npm run build之后vendor.js文件过大的问题

博客

11-22

2万+

问题 &amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓

Vue 打包优化方案（解决 vendor.js 过大的问题）

黄河爱浪的博客-专注CSS,jQuery,uni-app领域

07-02

3万+

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。优化方式通常有以下方式：一、路由懒加载：把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。参考链接： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html 二、不打包第三方库：减少 vend...

vue项目中 vendor打包后过大解决办法

Lee_NeiL_的博客

11-08

1万+

vendor打包过大的原因就是引用三方插件的js太大了，可以直接引用镜像解决问题解决办法如下 1.在webpack.base.conf.js中新增配置项表示webpack不需打包的文件，‘插件名’: '项目中别名' 2.在index.html中引入相应镜像文件完成。图一没使用镜像引入图二仅引入vue 图三引入element后 ...

解决使用vue+elementui组件采用webpack打包导致vendor过大的情况

qq_26026975的博客

02-26

2万+

1.如果你使用了webpack来打包你的vue项目，如发现你的vendor.js过大则可以参考本文的解决方案.2.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用element-ui等第三方库。后果就是你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载j...

vue项目打包后vendor文件过大，如何优化？解决办法

rainbow8300的博客

11-23

6010

1、路由懒加载 – 我们都了解，vue在上线的时候，是用webpack工具，把所有组件里的js文件，css文件都打包到一起，我们看起来很清晰，仿佛很优秀的样子，额，但实际上就是很优秀的样子。不过里面的问题就是，所有组件里的js都会被压缩到一个文件夹里，所有的css也会被压缩在一个文件夹里，且生成了一堆.map文件。这样，首页兄弟就很难受了，我就一个简单的banner页面，你非让我加载跟我不想关的东...

vue 打包时libs过大

08-23

当打包Vue项目时，如果生成的libs文件过大，可以采取以下措施进行优化。首先，可以使用webpack-bundle-analyzer工具来分析打包后的文件，找出哪些模块是占用空间较大的。可以通过安装和配置webpack-bundle-analyzer来实现这一步骤。其次，可以考虑对路由进行优化。如果项目中有很多页面和路由，可以尝试按需加载路由，即在需要访问某个页面时再加载相应的路由模块，而不是一次性加载所有路由模块。这样可以减少打包后libs文件的大小。另外，可以使用SDN（Software-Defined Networking）进行优化。SDN可以通过网络虚拟化和网络功能划分等方式来提高网络的灵活性和效率，从而减少数据传输的大小。还可以去掉map文件。在生产环境下，map文件通常不需要，可以通过配置productionSourceMap为false来禁用map文件的生成。最后，可以使用gzip来对打包后的文件进行压缩。可以安装compression-webpack-plugin插件来自动进行gzip打包，从而减小文件的体积。以上是几种优化vue打包时libs文件过大的方法，可以根据具体情况选择适合项目的优化策略。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue打包之后文件过大,首开进度缓慢](https://blog.csdn.net/lxw_hk2_zy/article/details/123276044)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]