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. C++设计模式——迭代器模式

    前言 最近非常感伤,总是怀念大学的日子,做梦的时候也常常梦到.梦到大学在电脑前傻傻的敲着键盘,写着代码,对付着数据结构与算法的作业:建立一个链表,遍历链表,打印链表.现在把那个时候声明的链表的头文件拿 ...

  2. 022_word中如何正确的使用正则表达式进行搜索

    一.word中正则表达式详解 https://www3.ntu.edu.sg/home/ehchua/programming/howto/PowerUser_MSOffice.html 实战举例: ( ...

  3. Mysql 常用SQL语句集锦

    基础篇 //查询时间,友好提示 $sql = "select date_format(create_time, '%Y-%m-%d') as day from table_name" ...

  4. selenium+python-unittest多线程生成报告

    前言 selenium多线程跑用例,这个前面一篇已经解决了,如何生成一个测试报告这个是难点,刚好在github上有个大神分享了BeautifulReport,完美的结合起来,就能生成报告了. 环境必备 ...

  5. Linux系统中yum 命令讲解

    (一)yum介绍 Yum(全称为 Yellow dogUpdater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定 ...

  6. Mapreduce的排序（全局排序、分区加排序、Combiner优化）

    一.MR排序的分类 1.部分排序:MR会根据自己输出记录的KV对数据进行排序,保证输出到每一个文件内存都是经过排序的: 2.全局排序: 3.辅助排序:再第一次排序后经过分区再排序一次: 4.二次排序: ...

  7. Selenium2+python自动化45-18种定位方法（find_elements）

    前言 江湖传言,武林中流传八种定位,其中xpath是宝刀屠龙,css是倚天剑. 除了这八种,其实还有十种定位方法,眼看就快失传了,今天小编让失传已久的定位方法重出江湖! 一.十八种定位方法 前八种是大 ...

  8. Sublime编译器快捷键大全

    Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有打开文件 Ctrl+Shift+V ...

  9. 动态规划——Valid Permutations for DI Sequence

    We are given S, a length n string of characters from the set {'D', 'I'}. (These letters stand for &q ...

  10. PBRT笔记(3)——KD树

    茎节点与叶子节点 茎节点与叶子节点皆适用KdAccelNode来表示 注意:这里使用了匿名union union有个特性:内部类型共用一段内存,且大小为内部最大类型的大小. struct KdAcce ...