原文我的博客:支持原文吧😄 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端的检测
下面会列出需要优化的地方
