为了vue-cli spa项目优化首屏所做的事情

layman 发布于2019-08-20 18:24 / 419人阅读

摘要：第一次写项目，但是在实践的过程发现了很多坑，这篇文章主要讲述的是项目首屏加载过慢的大坑。建议使用，相对来说算是比较快的了。在官方文档中有相关实现的代码，很简单。毕竟首屏加载，优化都得靠了。

第一次写 vue spa项目，但是在实践的过程发现了很多坑，这篇文章主要讲述的是spa项目首屏加载过慢的大坑。
在webpack的配置中，在打包的过程中，会将所有的库都打包到vendor.js中，所以导致了vendor.js这包过大，而页面要想出现数据必须在vendor.js加载完成以后，所以后面所做的努力基本就是想办法把vendor.js的体积变小。

1.externals

在webpack.base.conf.js这个文件中，module.exports输出的对象里面加一个key 叫做 externals,配置如下

//webpack.base.conf.js
 externals: {
        "vue": "Vue",
        "vue-router": "VueRouter",
        "vuex": "Vuex",
        "axios": "axios",
        // "vue-lazyload": "VueLazyload",
        "moment": "moment",
        // "element-ui": "element-ui"
    }
//index.html

externals的左边是给 require用的 ,右边是给全局调用的。建议使用bootcdn，相对来说算是比较快的cdn了。
还有一种是dll打包，目前没有实践过，下次可以试试。

2.开启gzip

后端用的是nginx，稍微配置即可开启gzip

sudo nano /etc/nginx/nginx.conf
在Gzip Settings里加入：

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

开启了以后，js、css相关的代码可以压缩将近5倍的体积。

3.开启路由懒加载

开启了以后不同的路由组件可以分成不同的代码，从而实现进入相应页面以后才加载相关代码。
在官方文档中有相关实现的代码，很简单。

//引入的时候改成懒加载的形式
const admin = resolve => require(["../views/admin.vue"], resolve);

4.bundleAnalyzerReport检测包的情况

在config/index.js中一个相关插件叫做bundleAnalyzerReport，上面有几行注释，讲的是只要在打包的时候输入npm run build --report,就可以在打包的同时查看每个打包生成的js，里面的库的构成情况，方便我们进行相关的删减，比如有的库太大了，是否可以自己实现，有的库是否有必要，可否删除之类。

5.服务端加载

额，这个太难搞了，刚入行node.js只会npm这一点相关知识，以后有空要好好学学，听说通过nuxt.js是比较容易上手，还得以后慢慢实践。毕竟首屏加载，seo优化都得靠SSR(service side render)了。

GPU云服务器云服务器数据分析做的事情数据分析每天要做的事情自己做的项目怎么找云服务器所做

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84459.html

2017-07-30 前端日报

摘要：前端日报精选译避免这些常见的错误可视化分析的内存分配与回收手机里的注册那些事儿入门基础使用高性能种提升速度的新工具中文必知必会学习笔记一个人文章在中正确的尾部调用众成翻译扩展运算符众成翻译众成翻译我们对流行框架们的选择为了 2017-07-30 前端日报精选【译】避免这些常见的JavaScript错误可视化分析js的内存分配与回收手机QQ里的注册那些事儿Node.js 入门：Exp...

oujie 2019-08-20 18:25 评论0 收藏0
Vue SPA(单页应用)首屏优化实践

摘要：原文首发代码压缩如果你用的是服务器，请修改配置文件其他类似在里加入开启或者关闭模块，这里使用表示启动设置允许压缩的页面最小字节数默认值是，不管页面多大都压缩设置系统获取几个单位的缓存用于存储的压缩结果数据流代表以为单位，按照原始数据大原文首发：　https://shuirong.github.io/ 1.代码压缩(gzip) 如果你用的是nginx服务器，请修改配置文件(其他web ...

wall2flower 2019-08-21 11:41 评论0 收藏0
日常笔记

摘要：同构和直出服务端渲染出首屏，主要为了减少用户等待的时间，缩短白屏时间，在移动数据网络情况下能够获得较好的用户体验。在优化渲染时间的时候监控页面情况很有用。 @(StuRep)2016.06.11 react+node同构和直出服务端渲染出首屏，主要为了减少用户等待的时间，缩短白屏时间，在移动数据网络情况下能够获得较好的用户体验。了解了一下react实现同构和直出的方案，收藏了一些还...

Enlightenment 2019-08-22 10:38 评论0 收藏0
影响网页渲染的关键

摘要：最优化渲染路径，实际上只要聚焦三件事情最小化关键资源的数量最小化关键字节数最小化关键路径的长度理解页面加载速度的测量办法当百度谈论页面加载速度时，他们并不是指加载一个网页的总时间。张超 — MAY 21, 2015 经常有站长、开发者、运维疑惑：为什么我们的后台服务器很快，但是用户要看网页里面的内容却需要很长时间？我们在上一篇文章《怪兽大作战: 解析网站打开慢的原因》中简单介绍了影...

weknow619 2019-05-28 16:53 评论0 收藏0
用vue从零开发和部署一款移动端pwa单页应用

摘要：另外，单页应用因为数据前置到了前端，不利于搜索引擎的抓取。所以我们需要对自己的单页应用进行一些优化。前言最近秋招之余空出时间来按自己的兴趣动手做了一个项目，一个基于vue-cli3.0, vue，typescript的移动端pwa，现在趁热打铁，将这个项目从开发到部署整个过程记录下来，并将从这个项目中学习到的东西分享出来，如果大家有什么意见或补充也可以在评论区提出。先介绍一下这个项...

Channe 2019-07-25 14:28 评论0 收藏0