此时做的一个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. Fescar(Seata)-Springcloud流程分析-1阶段

    Fescar是阿里18年开源的分布式事务的框架.Fescar的开源对分布式事务框架领域影响很大.作为开源大户,Fescar来自阿里的GTS,经历了好几次双十一的考验,一经开源便颇受关注.今天就来看了F ...

  2. .NET Core开发者的福音之玩转Redis的又一傻瓜式神器推荐

    作者:依乐祝 原本链接:https://www.cnblogs.com/yilezhu/p/9947905.html 引子 为什么写这篇文章呢?因为.NET Core的生态越来越好了!之前玩转.net ...

  3. 推荐一款好用的任务定时器：Quartz

    前言 官网:https://www.quartz-scheduler.net/ 一款开源的任务定时器. 日常有很多地方需要定时刷新的,比如微信开发中的微信API token,或者定时清理一下缓存数据等 ...

  4. C++系列总结——多态

    前言 封装隐藏了类内部细节,通过继承加虚函数的方式,我们还可以做到隐藏类之间的差异,这就是多态(运行时多态).多态意味一个接口有多种行为,今天就来说说C++的多态是怎么实现的. 编译时多态感觉没什么好 ...

  5. MVC各层介绍使用---初步理解

    controller层负责请求的转发,以及数据的转发: service层负责项目的业务逻辑处理: dao层负责与数据库的数据查询与连接,其中的bean层负责数据的整理转发: view层负责JSP,ht ...

  6. C# xml序列化与反序列化 特性的使用

    以下为将被序列化的类Entity: [XmlRoot("Root")] public class Entity { [XmlAttribute(AttributeName = &q ...

  7. IntelliJ IDEA下的使用git

    1.git简介 git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  8. [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  9. （二） Keras 非线性回归

    视频学习来源 https://www.bilibili.com/video/av40787141?from=search&seid=17003307842787199553 笔记 Keras ...

  10. vue环境搭建及项目介绍

    搭建开发环境(搭建开发环境前必须安装node.js): 1.安装vue脚手架工具 $ npm install -g vue-cli 2.创建项目(注意项目名字不要有大写字母) vue init < ...