此时做的一个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-cli2vue-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. HandlerInterceptor拦截实现对PathVariable变量的读取

    Http请求拦截作用 拦截后可以修改请求体 拦截后可以作一些其它统一的操作 问题提出 对于很多时间需要拦截很多Http请求,然后去获取一些参数,这些参数可能是querystring串,也可能是路由上的 ...

  2. 简述java接口和C++虚类的相同和不同之处

    C++虚类相当于java中的抽象类,与接口的不同处是: 1.一个子类只能继承一个抽象类(虚类),但能实现多个接口 2.一个抽象类可以有构造方法,接口没有构造方法 3.一个抽象类中的方法不一定是抽象方法 ...

  3. AppBoxFuture(五): 分布式文件存储-Store Everything

      本来本篇是想介绍前端组件化开发用户界面,发现框架还未实现文件存储,原本计划是后续设计开发的,索性把计划提前,所以本篇将介绍基于Raft实现分布式的文件存储引擎. 一. 实现思路   既然是分布式存 ...

  4. hosts文件的作用

    hosts文件的作用 hosts文件是一个没有扩展名的系统文件,可以用记事本等工具打开,作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一 ...

  5. DS标签控件文本解析格式

    DS标签控件使用DSL文本渲染引擎,支持DSL引擎代码.目前支持代码如下: <b>粗体</b> 以粗体显示 <i>斜体</i> 以斜体显示 <u& ...

  6. oracle数据库导出表结构步骤

    导出完成后在状态栏中显示Find

  7. MVC 中 Razor引擎学习:RenderBody,RenderPage和RenderSection

    RenderBody 在Razor引擎中没有了“母版页”,取而代之的是叫做“布局”的页面(_Layout.cshtml)放在了共享视图文件夹中.在这个页面中,会看到 标签里有这样一条语句: @Rend ...

  8. DevExpress AspxGridView分页使用隐藏系统默认英文分页

    1第一篇文章研究了怎么汉化,但是在实际使用过程中发现汉化的有小问题,DevExpress支持自定义按钮,也可以在属性中设置成中文,这样避免汉化不准确的问题 <dx:ASPxGridView ID ...

  9. c#实战开发:以太坊钱包快速同步区块和钱包卡死解决方案 (三)

    首先以太坊默认的快速同步模式 我们需要先设置当前同步模式内存大小512-2048范围 在服务器配置情况下最大化内存 输入以下命令 geth --fast --cache=2048 最快同步模式也是 保 ...

  10. OO_BLOG2_多线程电梯模拟

    作业2-1 单部多线程傻瓜调度(FAFS)电梯的模拟 I. 基于度量的程序结构分析 1)程序结构与基本度量统计图 2)分析 ​ 这次作业基本奠定了本人三次电梯作业的基本架构,简述如下: Elevato ...