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. Linux找回root密码

    Linux忘记root密码时,密码重置步骤: 1.将虚拟机重启: 2.当进入GRUB倒计时界面,点击键盘e键: 3.点击键盘上下键选择第二行(kernel /vmlinuz-2.6.32-71.29. ...

  2. AGC电路以及AD8347正交解调芯片

    1.AGC电路的工作原理 1.1AGC电路的用途 随着电磁环境的日益恶化, 不同频段电磁信号之间的相互串扰, 以及可能出现的人为干扰, 将会导致接收机输入端口的信号动态范围较大, 一旦出现电路饱和或是 ...

  3. 【原创】大叔问题定位分享（8）提交spark任务报错 Caused by: java.lang.ClassNotFoundException: org.I0Itec.zkclient.exception.ZkNoNodeException

    spark 2.1.1 一 问题重现 spark-submit --master local[*] --class app.package.AppClass --jars /jarpath/zkcli ...

  4. R语言仪表盘

    单个仪表盘 导入包及代码: library(ggplot2) library("showtext") library(Cairo) library("Rmisc" ...

  5. Java模拟耗时任务异步执行

    说明:耗时任务开启单独线程处理,任务线程处理完毕通知主线程 1.回调接口定义 public interface ResponseCallBack { public void printMsg(Stri ...

  6. Python学习（四十）—— Djago之认证系统

    一.COOKIE 与 SESSION 概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cook ...

  7. 手动部署 kubernetes HA 集群

    前言 关于kubernetes HA集群部署的方式有很多种(这里的HA指的是master apiserver的高可用),比如通过keepalived vip漂移的方式.haproxy/nginx负载均 ...

  8. Codeforces 700E. Cool Slogans 字符串,SAM,线段树合并,动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF700E.html 题解 首先建个SAM. 一个结论:对于parent树上任意一个点x,以及它所代表的子树内任 ...

  9. 关于getchar-scanf函数的相关坑！

    首先,我们编写如下所示的代码: #include <stdio.h> void test(int n) { ; ; ; a = b; b = c; c = n; printf(" ...

  10. 表单提交 fastadmin form

    1.引入form组件 require(['form'], function(Form){}); 2.生成form元素 3.绑定事件之验证(也可以绑定总表单事件Form.events.bindevent ...