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. Python Day2 （二）

    字典的操作: 见连接: http://www.cnblogs.com/alex3714/articles/5717620.html 第二天作业,修改haproxy配置文件. 程序练习 程序1: 实现简 ...

  2. C++实验一

    2-28 #include <iostream> using namespace std; int main() {char x; cout<<"Menu: A(dd ...

  3. 使用Elasticsearch-dump迁移ES数据

    1. Elasticsearch-dump 安装 1) yum install epel-release 2) yum install nodejs 3) yum install nodejs npm ...

  4. Django-瀑布流

    1.通过ajax方式实现滚动条瀑布流(1)创建数据库:xixi\pubu\models.py from django.db import models #Img图片表 class Img(models ...

  5. Centos查看系统CPU个数、核心数、线程数

    1.查看 CPU 物理个数 grep 'physical id' /proc/cpuinfo | sort -u | wc -l 2.查看 CPU 核心数量 grep 'core id' /proc/ ...

  6. js编码解码 punyCode

    ;(function(w) { var PunycodeModule = function () { function IdnMapping() { this.utf16 = { decode: fu ...

  7. [转] 微信小程序之生命周期

    本篇文章介绍小程序的生命周期,由于小程序分为应用和页面两个部分,所以小程序的生命周期就涉及到三个部分,分别是: 应用的生命周期 页面的生命周期 应用的生命周期对页面生命周期的影响 一.应用的生命周期 ...

  8. MQTT服务器的搭建（Windows平台）

    人工智能.智能家居越来越火,在服务器和多个终端进行通信的过程中使用传统的请求/回答(Request/Response)模式已经过时,伴随而来的是发布/订阅(Publish/Subscribe)模式-- ...

  9. 99%的Linux运维工程师必须要掌握的命令及运用

    本为同步于微信公众号[IT行业技术圈]关注即可查看更多相关知识点~ Linux对于程序员来并不陌生,随着图形化界面的深入人心,渐渐地命令行开始淡出了我们的视野,随着时间的推移也变得生疏且陌生起来.在此 ...

  10. Android系统文件目录路径说明

    系统数据存储路径,如下:其中应用程序包名为:com.spt ContextWrapper类中,包含以下方法: 1. getFilesDir() --> 内部存储 @Override public ...