博主最近发现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. 洛谷【P4883】mzf的考验

    浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...

  2. 百度地图API的第一次接触——地图事件

    0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  3. Linq 查询多张表，关系表

    项目中遇到一个问题, 有4张表, 然后相互之间有3张关系表关联, 一共七张表. 想要从顶层表查询最底层表的记录,不能写7层嵌套. 用Linq实现特别简单,  表:User,Role,Module,Fu ...

  4. jQuery之简单的表单验证

    html部分: <body> <form method="post" action=""> <div class="in ...

  5. SimpliciTI协议地址分配

    1.多个ED节点和AP正确连接后,AP都会给ED分配一个相应的地址.当某个ED出现意外,比如电源问题,和AP断开连接,AP并不将该ED节点的地址消除.当该ED恢复正常,重新申请加入网络时,AP会检测该 ...

  6. Maven项目实战（1）

    一.maven的好处? 同样的项目使用maven工程来实现,它的项目源码很小: 1.依赖管理 就是对jar 包管理的过程 2.项目的一键构建 (编译-----测试----- 运行 --打包------ ...

  7. Python 同ip网站查询（制作网站接口）

    老师专门打电话回来说不让玩电脑~~   呵呵.  LOL把被人坑死了. 五排果然不适合我. 去翻了下曾经的Python项目. 在爬虫文件夹下面找到了这个. 我也就厚脸皮的什么都不改就放上来了: #co ...

  8. Entity Framework5学习笔记

    主要 是学习DbContext http://zzk.cnblogs.com/s?w=DbContext&t=b

  9. matlab新手入门（四）（翻译）

    工作空间变量 工作区包含您在数据文件或其他程序中创建或导入到MATLAB®中的变量. 例如,这些语句在工作空间中创建变量A和B. A=255; b=ones(size(Img)); 您可以使用whos ...

  10. 软件工程作业——Word Counter

    github地址 https://github.com/Pryriat/Word_Counter 项目说明 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命 ...