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

最新推荐文章于 2024-05-30 09:20:31 发布
最新推荐文章于 2024-05-30 09:20:31 发布
阅读量2.7w 收藏 15
点赞数 3
分类专栏： 客户端 服务端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26026975/article/details/79381555
版权

1.如果你使用了webpack来打包你的vue项目，如发现你的vendor.js过大则可以参考本文的解决方案.

2.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用element-ui等第三方库。后果就是你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载js的时间越久)


3.解决方案:采用cdn加速去从别的服务器上加载第三方库而非自己的服务器，这样就会快很多.并且能节省自己服务器的带宽。

4.解决步骤:

   1.选用unpkg来作为第三方提供.如我想要axios包则输入网址为 https://unpkg.com/axios/ (末尾加斜杠代表你要查询该库的所有版本列表).然后你可以选择对应的版本如 https://unpkg.com/axios@0.18.0/index.js 。其中 @0.18.0为库的版本号，若不写则默认最新版本.

   2.在index.html中 将你所需的第三方库的链接加载进来,如下图:

   

 3.在webpack.base.conf 中添加 externals来告诉webpack我们这些第三方库不需要打包 如下图


4. 执行npm run build 来验证是否减小了。效果图如下(已经由原来的900kb减小到了130kb):


williams_zhong
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
vue中常用的vendor.js
08-19
在使用vue的过程中，通常我们都会用到的一个vendor打包类
vue-cli 引用elementUI打包后文件过大
weixin_30730053的博客
07-23 1255
解决方案：使用externals引用第三方资源，防止element资源被打包到自己项目中，(总共修改3个页面index.html、webpack.base.conf.js、main.js) 1、修改index.html页面，再head中引入cdn。 2.修改webpack.base.conf.js文件.添加externals配置 externals: { vue: '...
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
最新发布
05-30 2962
在main.js页面定义js全局变量// 背景图片路径。
小程序：uniapp解决 vendor.js 体积过大的问题
snowball的博客
06-24 2万+
一、环境介绍uniapp + HBuilderX二、问题描述真机调试，提示包提交过大，不能生成二维码，后续上传代码更是不可能了 三、代码包体积优化代码包体积优化 | 微信开放文档3.1、图片等静态资源放到服务器上，小程序引用服务器文件地址（图片较多的话会节约大量的体积）。 项目仅保留了底部导航的icon。3.2、根据业务类型进行分包处理（分包后单一包的体积迅速减少）：使用分包 | 微信开放文档 3.3、运行时压缩代码 （体积减少很多，测试项目减少400多kb） 压缩前： 这几步骤下来代码体积到了：小于2
uniapp打包字节小程序提示vendor.js过大，怎么进行优化?
04-17 5956
此外，我们还可以通过使用tree shaking、按需引入等技术，对不必要的模块进行剔除，从而减小vendor.js的体积。同时，我们还可以使用uni-app的externals参数，将第三方库和框架从vendor.js中剔除，从而进一步减小vendor.js的体积。因此，我们需要进行优化。🌽 最后，我们需要注意的是，尽量避免在代码中直接引用第三方库和框架的全局变量或对象，而是通过import的方式引入，这样能够使tree shaking工具更好地识别出不需要的代码，从而减小vendor.js的体积。
三种方法，合力解决vue首屏加载慢,打包后的vendor.js文件过大问题
出雲无心的博客
12-28 7623
有时候我们将vue项目打包后运行后，访问首页时发现：需要等待十几秒甚至几十秒的时间才能看到页面，通过F12发现，vendor.js高达几MB，加载时间很长，这给我们造成了极大的困扰，用户体验太差了吧！ 下面我就来为大家介绍一下，有效的解决方法： 文章目录1. CDN方式引入各种包第一步：在**index.html**文件中用CDN方式引入所需的包，如下图所示：第二步:**把通过CDN方式引入的...
解决vue-cli脚手架打包后vendor文件过大的问题
10-17
在使用Vue CLI构建项目时，有时会遇到打包后的vendor文件体积过大的问题，这会导致页面初始化加载速度变慢，甚至出现明显的白屏现象。解决这个问题是优化前端性能的关键步骤之一，因为大型的vendor文件会增加用户...
浅谈webpack打包之后的文件过大的解决方法
11-28
本文将深入探讨如何解决Webpack打包后文件过大的问题。 首先，我们需要确保Webpack是在生产环境下进行打包。通过设置全局变量`process.env.NODE_ENV`为`'production'`，可以告诉Webpack当前是生产环境，它会自动...
使用vue打包时vendor文件过大或者是app.js文件很大的问题
12-09
在使用vue-cli脚手架打包后（UI用的Element-ui），发现vendor文件很大，将近1M左右。。后来翻阅资料才明白，原来webpack把所有的库都打包到了一起，导致文件很大。 我的解决办法：  1、把不常改变的库放到index....
vue webpack打包优化操作技巧
08-28
本文主要介绍了 Webpack 打包优化（VUE Project），旨在帮助开发者解决项目打包时间过长的问题。 webpack 的基本概念 Webpack 把所有的静态资源都看做是一个模块，通过 Webpack，将这些模块组成到一个 Bundle 中去...
Vue项目总结之webpack常规打包优化方案
11-30
本文将深入探讨如何使用Webpack进行常规的打包优化，以缩短项目的构建时间。 首先，我们需要理解打包慢的原因。这通常是因为Webpack在处理大量模块、资源和依赖时消耗了大量的时间和计算资源。为了解决这个问题，...
使用uniapp在打包微信小程序时主包和vendor.js过大（uniCloud的插件分包）
GRC__cheng的博客
01-04 2万+
这些页面默认都会在主包里，因为uni_modules是主包，所以该目录下的uni-id-pages和uni-im页面也会打包到主包里（主包里面的vendor.js会打包所有主包里面的页面与插件的js文件），所以导致了主包里面的vendor.js在分包打包后依旧过大。但是如果你的微信小程序在uni_modles下引入了非常多的uni插件，比如说：uni-id-pages,uni-im,uSearch,uni-pay等uni全家桶。通过vue语法，将所有的组件导入到所有的页面（为了方便）
uni-app 微信小程序vendor.js 过大的处理方式和分包优化
xiexikk的博客
11-15 1万+
小程序工具提示vendor.js过大，已经跳过es6向es5转换。这个转换问题本身不用理会，因为vendor.js已经是es5的了。 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码 cli创建的项目可以在package.json中添加参数–minimize， 示例：“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue...
Vue Element ui webpack 打包文件过大
qq_19694913的博客
09-11 9157
今天撸完登录模块，打包的时候发现，单一个登录页面打包完的体积竟然达到了740KB！ 模块是基于Vue全家桶 + element ui编写的，但即使全引入使用，也不应该达到这么夸张的一个体积。 事出反常必有妖，用Cli初始化项目时附带的webpack-bundle-analyzer查看打包情况，添加一个scripts，"analyz": "set NODE_ENV=production ...
解决vue项目中引入element-ui第三方库导致项目打包造成vender.js文件过大问题的
weixin_39141044的博客
01-02 4513
一、vender.js文件过大问题 项目中使用了element-ui vendor.sj文件越小也就意味着首屏的速度越快，为了让vue项目首屏速度变快，在使用了路由懒加载。 项目打包后发现 我当时的表情谁：黑人??? WTF 最后发现是element-ui的锅 解决方法： 一共三步 1.修改webpack.base.conf.js 表示不需要webpack打包的文件 2.修改main....
解决uniapp编译后vendor.js文件过大（官方处理方案）
热门推荐
qq_34761385的博客
08-10 2万+
uni-app开发微信小程序，真机运行发布时工具提示vendor.js超过500KB，已经跳过es6向es5转换。通过资源管理器中的显示发现是vendor.js文件过大，有1M多。 在hbuilderx编译时不知你们是否有注意过这一段提示 ： 因为我们是运行模式，所以没有进行压缩代码，体积较大。理论上而言，如果要发布代码我们可以直接通过hbuilderx的 发行-》小程序-微信 即可。这样就不会出现体积过大无法打包的情况。 话又说回来，我们就喜欢在程序开发工具里发布代码，有时也遇到进行真机运..
前端性能优化：Vue项目打包后app.xxx.js 和 chunk-vendors.xxx.js 文件太大，导致页面加载时间太长
前端笔记——放弃很容易,但坚持一定很酷
02-01 2719
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 ，加载所耗费的时间也很长。
完美解决 vue webpack 单页面 加载慢 gzip 访问 vendor.js 打包文件过大问题
qq_19767623的博客
10-19 8847
步骤一 vue-cli开启打包压缩 和后台配合 gzip访问 1.首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true 2. 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是： npm install --save-dev compres...
Vue 项目中使用 webpack 将多个组件合并打包并实现按需加载
06-06
在 Vue 项目中使用 webpack 将多个组件合并打包并实现按需加载，需要使用 webpack 的 code splitting 功能。具体步骤如下： 1. 在 webpack 配置文件中配置 code splitting： ```javascript // webpack.config.js module.exports = { // ... optimization: { splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'all' }, common: { name: 'common', minChunks: 2, chunks: 'all', priority: -10, reuseExistingChunk: true } } } } }; ``` 2. 在组件中使用 `import()` 动态导入其他组件： ```javascript // MyComponent.vue export default { methods: { handleClick() { import('./OtherComponent.vue').then(module => { const OtherComponent = module.default; // 使用 OtherComponent 组件 }); } } }; ``` 3. 在模板中使用 `v-if` 或 `v-show` 按需显示组件： ```html <template> <div> <button @click="showOther">Show Other Component</button> <OtherComponent v-if="show" /> </div> </template> <script> export default { data() { return { show: false }; }, methods: { showOther() { import('./OtherComponent.vue').then(module => { const OtherComponent = module.default; this.show = true; }); } } }; </script> ``` 这样，webpack 会根据配置将多个组件打包成多个文件，并在需要时动态加载。注意，`import()` 返回的是一个 Promise，需要使用 `then()` 方法获取模块的导出值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值