vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大。页面加载速度过慢,影响用户体验。所以我们就要把用不到的依赖都抽出来,在index.html用第三方引入!

话不多说,上代码!

依赖未抽出前打包:

依赖抽出之后打包:

在这里我把一般都会引入的element-ui抽出来了!

在build目录下找到文件修改如下:

添加这个对象属性:前面为依赖名称,这样打包的时候就不会把这两个依赖打包进vendor,后面是自定义名称:(上图)

添加完成后注释掉引入的依赖名称!

这样最后我们在index.html中引入:

这样就完成了!

tips:1.js引入顺序一定要先引用vue.min.js,要不然会报错!

  2.vue依赖一定要抽来,用线上引入。

vue中打包后vendor文件包过大的更多相关文章

  1. 前端(以Vue为例)webpack打包后dist文件包如何部署到django后台中

    由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢? 1.打包后文件包dist 进入到 di ...

  2. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  3. vue打包时,assets目录 和static目录下文件的处理区别(nodeModule中插件源码修改后,打包后的文件应放在static目录)

    为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如 ...

  4. 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...

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

    这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...

  6. vue中打包生成可配置文件以便修改接口地址

    vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是.. 在打包之后如果有一个json配置文件以便修改那不是方便很多 在网上找了一些方法貌似都是异步请求 ...

  7. Vue中ESlint配置文件.eslintrc文件

    很久没有分享和更新过了 今天就给大家分享一篇 Vue中ESlint配置文件.eslintrc文件详解吧 ------------------------------------------------ ...

  8. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  9. vue-cli打包后dist文件运行空白和背景图显示问题详解

    1.文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. ...

随机推荐

  1. url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介【转】

    引子 浏览器URl地址,上网一定会用到,但是浏览器地址有中文或者浏览器url参数操作的时候,经常会用到encodeURIComponent()和decodeURIComponent()以及encode ...

  2. 华为交换机配置stelnet登陆的实例

    作者:邓聪聪 为满足等堡安全要求,对测评对象的交换机做安全登陆的限制 :开启ssh的服务 stelnet server enable :#创建认证用户的用户名和密码 aaa local-user te ...

  3. 一张图让你懂Python安装第三方库

  4. java入门需了解的历史

    1991年,Sun公司的Green项目,Oak 1995年,推出Java测试版 1996年,JDK1.0 1997年,JDK1.1 1998年,JDK1.2,大大改进了早期版本的缺陷,是一个革命性的版 ...

  5. 使用Jmeter监测服务器性能指标

    jmeter监控服务器CPU.内存等性能参数,需要安装一些插件 插件名:JMeterPlugins-Extras,JMeterPlugins-Standard 以及ServerAgent. 下载地址: ...

  6. 阿里云ECS发送邮件到腾讯企业邮箱

    1.安装软件 yum install mailx yum install sendmail 2.配置 vim /etc/mail.rc在文件最后加上如下内容: set smtp=smtps://smt ...

  7. 如何新建PDF文档,新建PDF文档的方法

    新建PDF文件的话,有两种方式,一种是直接通过使用PDF编辑器http://bianji.xjpdf.com/来新建PDF文件,,还有一种就是将PDF文件转换成Word文件,然后在Word文件中添加, ...

  8. CentOS7.6编译安装nginx

    配置阿里云yum源 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak wget -O /etc/yu ...

  9. Taro覆盖iview样式

    /* CustomComp.js */ export default CustomComp extends Component { static options = { addGlobalClass: ...

  10. James Munkres Topology: Theorem 19.6

    Theorem 19.6 Let \(f: A \rightarrow \prod_{\alpha \in J} X_{\alpha}\) be given by the equation \[ f( ...