博主最近发现vue-cli3项目做完后，点击首页加载时间好久啊，一般都要3-5s。这样的加载时间博主自己都受不了，所以就有了这个随笔，将自己的一些研究心得分享给大家。

  • 首先推荐大家下载一个webpack的打包分析工具  webpack-bundle-analyzer，这个工具用作分析你项目的打包出来的js包的大小。然后你可以根据这个工具找到需要优化的js包优化。比如打的包js里echarts、momentjs等都很大，我可以对echarts、momentjs采用cdn方式引入
  • 在vue-cli3中采用cdn方式引入
    1. 推荐给大家我所用的cdn网址--bootcn，当然，大家也可以选用其他的cdn网址如（cdnjs,unpkg）。个人更推荐使用bootcn是因为这个是国内较好的cdn网址。
    2. cdn的引入和普通的script引入方式一致。如下图
    3. 除了在index.html中引入，还需要将对应的引入写入到vue的配置问件中
    4. 在页面调用中用 import 导入即可。列如（import echarts from "echarts"）
  • 除了将第三方文件用cdn方式引入，我们项目中的大图片也需要做一下无损压缩
  • 路由采用懒加载（按需引入方式）
    component: () => import( /* webpackChunkName: "about" */ './views/login.vue')

    　　

  • 最后是服务器配置gzip（gzip）

vue-cli3项目优化首页加载过慢的一些心得的更多相关文章

  1. vue cli3 项目优化

    vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空 ...

  2. Vue优化首页加载速度 CDN引入

    https://blog.csdn.net/blueberry_liang/article/details/80134563

  3. vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  4. 如何对vue项目进行优化，加快首页加载速度

    上个月上线了一个vue小项目,刚做完项目,打包上线之后,传到服务器上发现首页加载巨慢. 由于开发时间比较紧,我想着怎么快怎么来,因而在开发过程中没考虑过优化性能问题,酿成最后在带宽5M的情况下页面加载 ...

  5. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  6. Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. v ...

  7. vue-router中，require代替import解决vue项目首页加载时间过久的问题

    vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...

  8. vue性能优化1--懒加载

    懒加载也叫延迟加载,即在需要的时候进行加载.随用随载.为什么需要懒加载?像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间 ...

  9. [转]Angular4首页加载慢优化之路

    本文转自:https://blog.csdn.net/itest_2016/article/details/80048398 Angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路 ...

随机推荐

  1. hdu3037Saving Beans——卢卡斯定理

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=3037 卢卡斯定理模板——大组合数的取模 代码如下: #include<iostream> #i ...

  2. makefile 使用【转载】

    该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客: http://blog.csdn.net/haoel/article/details/2886 makefile很重 ...

  3. java基础知识 学习 关于URL中传递的参数含有特殊字符

    有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了.下表中列出了一些URL特殊符号及编码                                   ...

  4. oracle 内连接 外连接 查询 笔记

    elect ename,job,sal from emp where deptno>10 order by sal desc; 联合查询,PK dept.deptno FK emp.deptno ...

  5. c# 正则表达式移除html文本前面的空格

    var val = Regex.Replace(text, @"^( | )+(?<value>.*)", "${value}", RegexOpt ...

  6. Auto Layout Guide----(一)-----Understanding Auto Layout

    Understanding Auto Layout 理解自动布局 Auto Layout dynamically calculates the size and position of all the ...

  7. Jodd发送邮件

    public static void main(String[] args) { Email email = Email.create().from("xxx") .to(&quo ...

  8. Solr highlight

    hl.preserveMulti 默认是false.Set to true to perform highlighting on all values of a multivalued field a ...

  9. 洛谷P3572 [POI2014]PTA-Little Bird

    P3572 [POI2014]PTA-Little Bird 题目描述 In the Byteotian Line Forest there are nn trees in a row. On top ...

  10. 【UVA - 136】Ugly Numbers（set）

    Ugly Numbers Descriptions: Ugly numbers are numbers whose only prime factors are 2, 3 or 5. The sequ ...