原文我的博客:支持原文吧😄 nuxt页面访问速度优化
今天在网上查询如何提高网站访问率的问题,看到其中一条是页面访问速度也占很大的比例,于是就看看自己的网站打开速度怎么样,于是打开chrome 浏览器 ->清楚缓存 ->打开google调试工具 -> 打开网页。
速度有点慢!!!
打开google调试工具查看具体是什么加载慢!
每次都清除缓存太麻烦!可以使用chrome浏览器的无痕模式,每次都是重新加载!
前端优化
首先就是处理加载速度很慢的东西!但nuxt 打包过后,js大部分的时候都是改了名的,看不出来是什么js,点击加载的资源,根据里面的代码 大概猜出来是什么东西!
第一个:是一个时间格式化的js,moment
,不知道这个东西为什么这么慢,其实大小也不大,我的代码也有自己的格式化工具,于是就移除了这个js。
第二个:element-ui
,由于创建项目的时候,选择了element-ui
,创建的模板代码默认使用的是全局加载,会加载一下没有使用的东西,于改成了按需加载。
首先安装babel-plugin-component
yarn add babel-plugin-component
复制代码
然后 修改 nuxt.config.js
去掉 element-ui 的css ,babel-plugin-component 会按需加载
修改build,添加
babel: {
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
复制代码
然后修改 plugins/element-ui.js
修改前
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })
复制代码
修改后
import Vue from 'vue'
import {
Card,
Message,
Image,
Dialog,
Tag,
Icon,
Row,
Col,
Timeline,
TimelineItem,
Divider,
InfiniteScroll
}
from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
const components = [
Card,
Message,
Image,
Dialog,
Tag,
Icon,
Row,
Col,
Timeline,
TimelineItem,
Divider
]
const Element = {
install(Vue) {
components.forEach(component => {
Vue.component(component.name,component)
})
}
}
Vue.use(InfiniteScroll)
Vue.use(Element, { locale })
复制代码
这两个优化完后,在访问一下,发现速度是好点了,但是还是不是很快,再看下请求时间,发现element-ui
的图标库加载很慢,浪费了我1.2s,目前项目中使用的并不是很多,就一两个地方,于是去掉icon的方式,直接加载图片,以后探索使用svg。
这个去掉之后,速度提升很大。前端优化到此差不多了,毕竟项目不是很复杂。
后端优化
给Nginx配置一个资源压缩:
#配置压缩 加速页面打开
gzip on; #开启资源压缩
gzip_min_length 2k;#设置页面允许压缩的最小字节
gzip_buffers 4 16k;#设置压缩的内存大小 按16k大小的 4倍申请内存
gzip_http_version 1.1;#设置http 协议版本
gzip_comp_level 2; #设置压缩等级1-9 值越小速度越快 压缩比越小
gzip_types text/plain application/x-javascript text/css application/xml image/jpeg image/gif image/png; # 设置压缩类型,没设置的不压缩
gzip_disable msie6;
复制代码
测试一下
curl -I -H "Accept-Encoding: gzip, deflate" "https://oitboy.com"
复制代码
出现红色部分,说明配置生效了。
ps: 推荐一个好用的免费的测试网站的工具 Google PageSpeed Insights
分别有移动端和pc端的检测
下面会列出需要优化的地方