此时做的一个vue-cli3项目build后，app.js达到了10M，主要为elementui、quill等组件；

最开始使用“compression-webpack-plugin”插件根据网上的说法 npm run build --report 随后访问 localhost:8888既可以访问，试了好几次都没法访问，后来点开“dist”发现里面多了一个report的html文件，直接在浏览器就可以静态预览

后来优化找过很多都是vuecli2的，无意中发现一篇帖子：【Vue CLI 2&3 下的项目优化实践 —— CDN + Gzip + Prerender】以及其github的基于vue-cli2和vue-cli3的优化，加载速度非常块的就展现了，从最开始的44s现在只需要3s

备注：此处vue-cli3的时候不要按照帖子里说的卸载vue等；另外可能会报错关于【sass-resources-loader】的错误，我这边是一些语法报错，没有开启eslint，我在使用的时候直接卸载移除了这块代码；

在对于环境配置的时候参考了【vue-cli3.0 环境变量与模式】

vue-cli3相关的更多相关文章

  1. Vue CLI3 关闭热替换后出现的warning

    用vue cli3做项目的时候如果开启了typescript的严格模式,在dev server热替换的时候往往就会打出一大堆warning,严重的影响了编译效率.官方并没有提供关闭warning的ap ...

  2. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  3. Vue CLi3入门

    摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...

  4. vue/cli3引入cesium

    vue/cli3引入cesium 一开始用了webpack结合vue引入vue:结果是各种bug,搞了半天.最后问了基友,发现vue脚手架这个·简单高效的方法,只需要几行代码就轻松地搞定啦! 方案一. ...

  5. Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】

    Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...

  6. 在 vue cli3 的项目中配置双服务，模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  7. 安装VUE Cli3 框架方法

    下面为大家介绍一下怎样安装  VUE Cli3的步骤 官网地址  https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...

  8. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  9. Vue CLI3 开启gzip压缩

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compr ...

  10. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

随机推荐

  1. [截稿日期] 人机交互与普适计算方向的A、B类国际会议

    CCF推荐的人机交互与普适计算方向的A.B类会议截稿日期 一.A类 序号 会议简称 会议全称 出版社   截稿日期 网址 1 CHI ACM Conference on Human Factors i ...

  2. ReentrantLock是如何基于AQS实现的

    ReentrantLock是一个可重入的互斥锁,基于AQS实现,它具有与使用 synchronized 方法和语句相同的一些基本行为和语义,但功能更强大. lock和unlock ReentrantL ...

  3. Data Warehouse

    Knowledge Discovery Process OLTP & OLAP 联机事务处理(OLTP, online transactional processing)系统:涵盖组织机构大部 ...

  4. 基于Log4Net本地日志服务简单实现

    背景 项目开发中,我们或多或少会使用诸如NLog,Log4Net,Kafka+ELK等等日志套件: 基于关注点分离原则,业务开发的时候不应该关注日志具体实现:并且后续能方便切换其他日志套件: 这里先实 ...

  5. 聊聊数据库~4.SQL优化篇

    1.5.查询的艺术 上期回顾:https://www.cnblogs.com/dotnetcrazy/p/10399838.html 本节脚本:https://github.com/lotapp/Ba ...

  6. Easyui 合并单元格

    onMyLoadSuccessText: function () { $(".datagrid-row").mouseover(function () { var titlestr ...

  7. 使用JsonProperty Attribute修改返回json

    使用JsonProperty Attribute修改返回 json 值的name 本例使用JsonPropertyAttribute在序列化为JSON时更改属性的名称. public class Vi ...

  8. Linux IO模型（同步异步阻塞非阻塞等）的几篇好文章

    聊聊同步.异步.阻塞与非阻塞聊聊Linux 五种IO模型聊聊IO多路复用之select.poll.epoll详解 ​

  9. 包、继承以及 LeetCode 27、28题

    1 package.import 和 import static 1.1 Package Java 引入了包(Package)机制,提供了类的多层命名空间,用于解决类的命名冲突.类文件管理问题.Jav ...

  10. hive基本操作与应用

    通过hadoop上的hive完成WordCount 启动hadoop Hdfs上创建文件夹 上传文件至hdfs 启动Hive 创建原始文档表 导入文件内容到表docs并查看 用HQL进行词频统计,结果 ...