此时做的一个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. okhttputils【 Android 一个改善的okHttp封装库】使用（二）

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 上一篇讲了如何在项目中导入OKHttputils库的操作,这一篇主要讲常见请求的写法. get请求 public String getPe ...

  2. 学习ASP.NET Core Razor 编程系列十三——文件上传功能（一）

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  3. MS SQL 锁与事务

    加锁的主要目的是为了防止并发操作时导致的数据不一致等问题,锁分为共享锁(S).更新锁(U).排他锁(X),共享锁与更新只是单向兼容?传说中的单相思? 事务 事务能保证数据操作的原子性,要么内部操作都提 ...

  4. nmon - 性能监控利器介绍

    关于nmon nmon 是一款小巧的系统监控程序(只有5000行代码),可以用来对CPU.磁盘.内存等资源指标来做实时监控. 之前在做系统性能优化工作时用得较多,觉得非常不错,于是在这里给大家介绍下用 ...

  5. cocos creator主程入门教程（十一）—— 有限状态机和行为树

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 本篇介绍有限状态机和行为树.有限状态机用于有限的状态下的AI,由于同时只能处于一个状态,多个状态需要多个 ...

  6. jquery中的$.fn的用法

    JQuery里的原型prototype分析       http://www.nowamagic.net/librarys/veda/detail/653 jquery中的$.fn的用法       ...

  7. LINQ之道

    提到LINQ首先我们要了解什么是委托:委托是一种引用方法的类型.一旦为委托分配了方法,委托将与该方法具有完全相同的行为.也就是说当你委托给一个人办一件事的时候,他就拥有这个能力去实现这件事,同样委托也 ...

  8. C# 中 equals( ) 和 == 的区别和用法

    Equals: 下面的语句中,x.y 和 z 表示不为 null 的对象引用. * 除涉及浮点型的情况外,x.Equals(x) 都返回 true. * x.Equals(y) 返回与 y.Equal ...

  9. SSH实现登陆拦截器

    /** * 登录验证拦截器 * */ @SuppressWarnings("serial") public class LoginInteceptor implements Int ...

  10. ASP.NET MVC 5 實作 GridView 分頁

    本文用 ASP.NET MVC 5 實作一個 GridView,功能包括: 分頁(paging).關鍵字過濾(filtering).排序(sorting).AJAX 非同步執行,外觀上亦支援 Resp ...