Vue+Nuxt项目如何实现首页加载时间优化？

2020-06-1903:38:29WEB前端开发Comments4,375 views字数 2868阅读模式

一、性能分析工具介绍文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1. PageSpeed Insights工具文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1.1 PageSpeed简介文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1.2 PageSpeed安装文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

2. webpack-bundle-analyzer工具文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

webpack-bundle-analyzer简介文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

webpack-bundle-analyzer安装文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

二、查看分析结果及优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1. PageSpeed的分析结果及优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1.1 PageSpeed的分析结果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1.2 PageSpeed的优化方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

2. webpack-bundle-analyzer的分析结果及优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

webpack-bundle-analyzer的分析结果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

webpack-bundle-analyzer的优化方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

优化结果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

前言

首页打开的时候，一共12个请求，，打开时间大概为，在打开之前会有很长一段时间的空白，要如何优化首页的加载时间呢？首页打开的情况如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

Vue+Nuxt项目如何实现首页加载时间优化？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

一、性能分析工具介绍

利用谷歌插件PageSpeed和webpack的webpack-bundle-analyzer查看分析结果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

可通过两个性能分析工具，来查看网页性能。一个是网页速度分析：PageSpeed Insights (by Google)；一个是Vue的webpack-bundle-analyzer分析工具。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1. PageSpeed Insights工具

1.1 PageSpeed简介

PageSpeed Insights是一款谷歌公司开发的网页速度分析插件，在Chrome中安装了PageSpeed Insights插件以后，用户在网站开发完成以后，就可以使用PageSpeed Insights插件来监控当前网站的运行速度，PageSpeed Insights插件在监控完成以后，还会给出一些网页速度优化的建议，用户可以参考其中的提示，在网站的开发或服务器开发方面更改产品的性能或增强服务器质量等方式来缩短网站的打开速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1.2 PageSpeed安装

安装方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

可在谷歌浏览器中下载安装该插件，并在Chrome的扩展器中启动网页速度分析的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

点击下载PageSpeed文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

2. webpack-bundle-analyzer工具

webpack-bundle-analyzer简介

是一款wepback的可视化资源分析工具，安装后，可通过运行命令，在浏览器中打开分析界面，可视化地查看分析结果，资源占用情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

 webpack-bundle-analyzer安装

由于项目中使用的nuxt框架，所以这里以nuxt为例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

①安装命令文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

npm install --save-dev webpack-bundle-analyzer

②配置方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

中analyze的配置如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

build: {
    /*
    ** You can extend webpack config here
    */
    analyze: true, // 使用webpack-bundle-analyzer来可视化包以及如何优化它们
    vendor: ['element-ui'],
    productionSourceMap: false,
    productionGzip: true,
    productionGzipExtensions: ['js', 'css', 'svg']
    }

③启动方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

npm run build --report
// or
yarn nuxt build --analyze
// or
yarn nuxt build -a

可使用命令npm run build --report或yarn nuxt build --analyze或yarn nuxt build -a构建应用程序，并在http：// localhost：8888上启动捆绑分析器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

二、查看分析结果及优化

1. PageSpeed的分析结果及优化

1.1 PageSpeed的分析结果

Vue+Nuxt项目如何实现首页加载时间优化？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

通过分析结果查看网页可优化情况，根据下面圆点点亮的项目进行优化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

1.2 PageSpeed的优化方法

根据分析结果，对静态资源图片、CSS、JS进行压缩，同时设置浏览器缓存，开启服务器gzip等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

2. webpack-bundle-analyzer的分析结果及优化

 webpack-bundle-analyzer的分析结果

运行analyze后，在浏览器中打开分析页面http：// localhost：8888显示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

Vue+Nuxt项目如何实现首页加载时间优化？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

分析结果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

可以看到，vendor中vendors的大小为1M，其中比较大的几个文件有element，mavon-editor，video等，而elementui占了776k。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

在打包运行的过程中显示的文件大小，其中较大的文件有[big]显示，如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

Vue+Nuxt项目如何实现首页加载时间优化？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

Vue+Nuxt项目如何实现首页加载时间优化？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

 webpack-bundle-analyzer的优化方法

①通过可视化分析结果，可以看到项目中没用到的一些模块，比如mavon-editor在项目中并没有使用，可以删除掉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

②第三方插件用CDN形式引入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

video、vue-aplayer这类第三方插件可以通过CDN形式引入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

③按需引入相关插件模块文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

elementUI占用较大的空间，所以，可按需引入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

引入方式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

首先，安装 babel-plugin-component：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

npm install babel-plugin-component -D

修改配置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

module.exports = {

    plugins: [

        { src: '~/plugins/element-ui', ssr: true }

    ]，

    build: {

        analyze: true, // 使用webpack-bundle-analyzer来可视化包以及如何优化它们

        vendor: ['element-ui'],

        maxChunkSize: 300000,

        productionSourceMap: false,

        productionGzip: true,

        productionGzipExtensions: ['js', 'css', 'svg'],

        babel: { // 按需加载
          plugins: [
            [
              'component',
              {
                'libraryName': 'element-ui',
                'styleLibraryName': 'theme-chalk'
              }
            ]
          ]
        }


}

修改plugins/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

如果你只希望引入部分组件,在这里只将项目中所用到的组件引入。假如项目只需要用到这部分组件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

import Vue from 'vue'

// 按需加载


import {

  Pagination,

  Dialog,

  Dropdown,

  DropdownMenu,

  DropdownItem

} from 'element-ui'



export default () => {

  (tableColumn)

  (Pagination)

  (Dialog)

  (Dropdown)

  (DropdownMenu)

}

按需引入后，element的大小只有600kb文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

Vue+Nuxt项目如何实现首页加载时间优化？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

④将assets中的第三方插件文件以及不需编译的图片放到static中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

优化后vender的大小还有894K文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

Vue+Nuxt项目如何实现首页加载时间优化？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

优化结果

最后优化后的时间大概是文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

Vue+Nuxt项目如何实现首页加载时间优化？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19448.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/19448.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定