1.去掉多余的库
  将不必要的库卸载掉 npm uninstall xxx
  举个例子:例如moment库文件是很大的,在前端可以用js的 new Date实现获取日期,或者可以其他库代替,也可以将moment库放在服务端用,将所有关于时间的处理放到服务端进行。 
2.路由懒加载
  将下图中的1改为2,详细可以百度搜索 vue路由懒加载
3.开启服务端gzip压缩
  我这里用的是nginx,所以下找到nginx配置文件:
  vi /etc/nginx/nginx.conf
  跟着下图一样开放nginx的gzip配置:

4.将文件放到cdn上
  在项目根目录index.html使用cdn节点导入

  

  

 

解决vue生产环境app.js或vendor文件过大问题的更多相关文章

  1. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  2. Vue生产环境调试的方法

    vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决.. 原理 先说下vue如何判断devtools是否可用的. vue devtools扩展组件会在window ...

  3. Vue生产环境部署

    前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue ...

  4. Vue 生产环境部署

    简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...

  5. Vue 生产环境(production) 打开 调试工具的方法

    总所周知,在production生产环境下,点击vue插件会显示, 并且按F12是没办法使用调试工具的,这样非常不方便 其实是有一个办法的,那就是复制下面的js,然后在控制台执行 代码中已经写清楚执行 ...

  6. vue生产环境清除console.log

    npm run build 后的生产环境的代码,会有很多开发时留下的console.log(),不可能每个页面不停地删除 在build/webpack.prod.conf.js文件里加上这样一段代码即 ...

  7. VUE生产环境打包build

    1.进入到项目根目录执行 npm run build 此时会自动打包在dist目录下 2.安装服务 npm  install -g serve 3.启动 serve dist 总结: 以上就是生产环境 ...

  8. vue 生产环境 background 背景图不显示原因

    通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...

  9. vue生产环境部署总结

    参考:http://www.cnblogs.com/vipstone/p/6910255.html 1. vue项目根目录/config/index.js更改资源生成路径 assetsPublicPa ...

随机推荐

  1. Express中间件原理详解

    前言 Express和Koa是目前最主流的基于node的web开发框架,他们的开发者是同一班人马.貌似现在Koa更加流行,但是仍然有大量的项目在使用Express,所以我想通过这篇文章说说Expres ...

  2. 【STM32】使用SDIO进行SD卡读写,包含文件管理FatFs(五)-文件管理初步介绍

    其他链接 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(一)-初步认识SD卡 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(二)-了解SD总线,命令的相关介绍 ...

  3. Bash shell(六)-管道命令

    就如同前面所说的, bash 命令执行的时候有输出的数据会出现! 那么如果这群数据必需要经过几道手续之后才能得到我们所想要的格式,应该如何来设定? 这就牵涉到管线命令的问题了 (pipe) ,管线命令 ...

  4. Spring.DM版HelloWorld

    本文主要描述使用Spring.DM2.0,创建OSGi的HelloWorld演示程序,理解Spring.DM的OSGi框架实现机制.   环境描述: 项目 版本 Eclipse 3.7.x JDK 1 ...

  5. eclips 配置一个tomcat,启动多个不同端口的web项目

    前提: 记录这个文章是因为在网上查资料,很多都是,用eclips.配置多个tomcat,就像下面图这样配置两个tomcat 去启动不同的web: 运动多个web 项目,设置不同的端口,需要多个tomc ...

  6. feign中开启熔断的书写步骤

    /**   1.在pom.xml中引入依赖    2.在application.yaml中开启hystrix 3.在方法上配置熔断类     4.书写接口的实现类 **/ //1.在pom.xml中引 ...

  7. 【力扣】922. 按奇偶排序数组 II

    给定一个非负整数数组 A, A 中一半整数是奇数,一半整数是偶数. 对数组进行排序,以便当 A[i] 为奇数时,i 也是奇数:当 A[i] 为偶数时, i 也是偶数. 你可以返回任何满足上述条件的数组 ...

  8. 索引以及Mysql中的索引

    一.什么是索引 索引是表的目录,会保存在额外的文件中,针对表中的指定列建立,专门用于帮助用户快速查询数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置,然后直接获取 ...

  9. 关于og4j漏洞修复解决方案及源码编译

    最近log4j爆出重大漏洞,程序员要赶紧修复了!文末提供已经编译好的jar包. 建议最好修复到log4j-2.15.0-rc2版本,临时解决方案还是存在jndi漏洞. 打开log4j官网https:/ ...

  10. Jmeter——脱离Jenkins后,Ant集成邮件通知

    之前搭建在本地的Jenkins环境,由于重装系统的原因,环境不能用了.在用jmeter做测试的时候,索性用本地ant构建,运行下来也一样平稳. 结合Jenkins搭建环境,可以参考博文:Jenkins ...