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 会按需加载 

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 })

 修改后

这两个优化完后，在访问一下，发现速度是好点了，但是还是不是很快，再看下请求时间，发现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端的检测

下面会列出需要优化的地方