解决vue项目中引入element-ui第三方库导致项目打包造成vender.js文件过大问题的

最新推荐文章于 2024-04-19 09:41:28 发布
最新推荐文章于 2024-04-19 09:41:28 发布
阅读量4.5k 收藏 2
点赞数 1
分类专栏： Vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39141044/article/details/85612360
版权
前端 同时被 2 个专栏收录
44 篇文章 3 订阅
订阅专栏
Vue
3 篇文章 0 订阅
订阅专栏

一、vender.js文件过大问题

项目中使用了element-ui

vendor.sj文件越小也就意味着首屏的速度越快，为了让vue项目首屏速度变快，在使用了路由懒加载。
项目打包后发现
在这里插入图片描述

我当时的表情谁：黑人??? WTF

最后发现是element-ui的锅

解决方法：
一共三步

1.修改webpack.base.conf.js

在这里插入图片描述
表示不需要webpack打包的文件


2.修改main.js

注释掉引入相应的第三方库
在这里插入图片描述

3.修改index.html

注意，一定要锁版本，使用@来指定引入第三方js的版本
在这里插入图片描述

再打包查看
在这里插入图片描述

poorpenguin
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0+踩坑之路 --项目中引入element-ui第三方库导致项目打包造成app.js文件过大问题
qq_33682618的博客
07-29 1954
一、app 文件过大 问题 项目中引用了 element-ui vue-router 使用了懒加载之后， npm run build 之后打包文件 app.js 超大 ，影响了首次访问网站的速度。 二、解决办法 build 文件夹下的webpack.base.conf.js module.exports // 在次代买中添加 externals:{ 'Vue':'Vue', 'ele...
Vue Element ui webpack 打包文件过大
qq_19694913的博客
09-11 9144
今天撸完登录模块，打包的时候发现，单一个登录页面打包完的体积竟然达到了740KB！ 模块是基于Vue全家桶 + element ui编写的，但即使全引入使用，也不应该达到这么夸张的一个体积。 事出反常必有妖，用Cli初始化项目时附带的webpack-bundle-analyzer查看打包情况，添加一个scripts，"analyz": "set NODE_ENV=production ...
推荐一款高效UI框架：KBone UI
最新发布
gitblog_00014的博客
04-19 389
推荐一款高效UI框架：KBone UI 项目地址:https://gitcode.com/wechat-miniprogram/kbone-ui 项目简介 KBone UI 是微信小程序团队开发的一款专门用于多端统一开发的UI组件库。该项目旨在帮助开发者在微信小程序、H5、快应用等多个平台上实现一致的用户体验，提升开发效率和代码复用性。 技术分析 组件化设计 KBone UI 基于 Web Com...
解决使用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-cli 引用elementUI打包后chunk-vendors文件过大
qq_38102991的博客
11-18 3068
先上打包后的chunk-vendors大小结果图哈： 第一步： 在vue.config.js 中添加 externals来告诉webpack我们这些第三方库不需要打包，如下图： 第二步：在public下的idnex.html头部中加入CDN第三方库引用： 第三步：在main.js中删除import 导入的 element-ui 插件： 第四步：重新打包查看文件大小？ 不要着急，彩蛋哟：如果发现没有变化的话，在终端下运行：npm run build 再查看文件大小。 希望对同学们有帮助，也同时记录自
打包基于 vue-element-admin 项目遇到的问题记录及解决方案
Irene1991的博客
04-28 3033
真实商业项目打包遇到的问题记录及解决方案
Vue打包导致 JS 很大的问题解决【完美解决】
小道仙的后宫
11-17 1万+
先来叨叨一下： 这个问题困扰我很久了，一直没有解决。最后只好把 js 放到七牛云上面cdn，没想到，这样直接导致，流量访问超出，达到了百分之600，然后被通知欠费。这才痛下决心一定要解决这个问题。阅读下面的文章，一定会给你带来帮助，你所遇到的问题我基本都遇到了。 问题说明：打包导致 js 很大，然后访问特别慢。 Q：如果你的 js 达到了好几M，（除了个别情况，比如的代码量真的超级大到不...
vue.js element-ui validate中代码不执行问题解决方法
10-18
在Vue.js开发中，Element UI库提供了一套强大的表单组件和验证机制，方便开发者创建交互丰富的表单。然而，在实际使用中，我们可能会遇到validate方法不执行的问题，导致表单验证无法正常工作。本文将深入探讨这个...
VUE.js+element-ui实现JSON编辑器
07-24
在项目根目录下，打开命令行工具，输入`npm install`，这将会根据项目中的package.json文件下载并安装所有必要的依赖包，包括Vue.js、Element-UI和其他可能的辅助库。 在项目中，Vue.js作为核心框架，负责处理数据...
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
本文将详细探讨如何在JSP环境中集成Vue.js和Element-UI，并利用Vue.js的第三方组件增强功能。 首先，我们需要了解JSP的基础知识。JSP是一种服务器端的动态网页技术，它可以嵌入Java代码，用于处理动态内容。而Vue....
vue 2.0项目中如何引入element-ui详解
08-29
在Vue 2.0项目中引入Element-UI是提高应用界面美观度和用户体验的一个常见步骤。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件，如表格、按钮、通知等，用于快速构建现代化的企业级前端界面。本文...
Vue 项目打包以后 vendor.js 体积太大，影响首次加载速度
LonewoIf的博客
02-20 1万+
在 Vue 项目中，引入到工程中的所有 js、css 文件，编译时都会被打包进 vendor.js，若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方案：将引用的外部 js、css 文件剥离出来，不编译到 vendor.js 中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将 vendor.js、外部的 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 element-ui 优化打包 bundle js 大小
GreekMrzzJ的博客
10-13 3万+
背景 最近开发的一个项目使用了 vue+ element-ui 的技术栈，当然，还有其他的一些工具库，比如 axios。 说一下我的开发步骤，基础结构是通过 vue-cli@2.x 创建的，手动的加入了 axios vuex , vue-router 是脚手架自带的。 code split 1. 路由懒加载 使用 vue-router 的时候，如果按照默认配置，所有的路由都会被打包到一个 bund...
element-plus 自动引入全局配置size、zIndex、locale
xu_yi_hang的博客
03-03 3264
组件形式配置全局。全部引入、自动引入、按需引入都可用
element ui 本地引入_vue 引入antd、vant、element-UI失败
weixin_39737947的博客
11-20 319
我用的是@vue/cli 4.3. 最近调用了antd组件、element-UI组件样式最后都失败，页面没有显示任何控件。打开控制台提示：did you register the component correctly？For recursive components, make sure to provide the "name" option.上网搜了很多解决方案，无果。现在贴一下我的解决方案...
vue-cli3 同时按需引入vant和element ui
;
02-10 4789
一、安装vant和element ui 1.安装vant # 通过 npm 安装 npm i vant -S # 通过 yarn 安装 yarn add vant 2.安装element ui npm i element-ui -S 二、配置按需引入插件 1.vant npm i babel-plugin-import -D 2.element ui npm insta...
vue打包降低vendors.js文件的大小
qwguo
01-27 2220
vue打包项目优化 我们在打包vue项目的时候经常会遇到打包后的文件中vendors.js文件特别大，这个文件中的内容主要是我们项目中引入的第三方插件js文件，我们可以更改webpack的配置文件来排除这些第三方插件，然后在index.html文件中通过增加cdn引入的方式来优化我们的代码，使的我们的项目更快的加载。 方法： 找到vue项目的配置文件，如果使用的是vue-cli4脚手架，可以在项目的根目录下创建一个vue.config.js的配置文件，然后在配置文件中增加如下代码。 module.expor
解决Vue项目打包后文件过大问题
潇潇来吃瓜的博客
03-23 2589
在做首屏加载时间优化时，会发现chunk-vendors.js这个文件巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。
vue项目引入element-ui
11-24
在Vue项目中引入element-ui组件库，需要先安装element-ui，可以使用npm或yarn进行安装。安装命令如下： ```shell npm install element-ui -S ``` 或者 ```shell yarn add element-ui ``` 安装完成后，在main.js中引入element-ui和其样式文件，代码如下： ```javascript import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) new Vue({ el: '#app', render: h => h(App) }) ``` 在上述代码中，我们先引入Vue和App组件，然后引入element-ui和其样式文件，最后使用Vue.use()方法注册element-ui插件即可。 引入完成后，我们就可以在Vue组件中使用element-ui的组件了，例如在App.vue中使用Button组件，代码如下： ```vue <template> <div> <el-button>Click me</el-button> </div> </template> <script> export default { name: 'App' } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值