阅读 387

nuxt页面访问速度优化

原文我的博客:支持原文吧😄 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 会按需加载 image.png 修改build,添加

babel: {
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
复制代码

image.png

然后修改 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;
复制代码

image.png

测试一下

curl -I -H "Accept-Encoding: gzip, deflate" "https://oitboy.com"
复制代码

image.png

出现红色部分,说明配置生效了。

ps: 推荐一个好用的免费的测试网站的工具 Google PageSpeed Insights

分别有移动端和pc端的检测

image.png

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

文章分类
前端
文章标签