Vue+Nuxt项目如何实现首页优化？

目录

 

前言

一、性能分析工具介绍

1. PageSpeed Insights工具

1.1 PageSpeed简介

1.2 PageSpeed安装

2. webpack-bundle-analyzer工具

2.1 webpack-bundle-analyzer简介

2.2 webpack-bundle-analyzer安装

二、查看分析结果及优化

1. PageSpeed的分析结果及优化

1.1 PageSpeed的分析结果

1.2 PageSpeed的优化方法

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

2.1 webpack-bundle-analyzer的分析结果

2.2 webpack-bundle-analyzer的优化方法

优化结果

---

前言

首页打开的时候，一共12个请求，4.5M，打开时间大概为7.64s，在打开之前会有很长一段时间的空白，要如何优化首页的加载时间呢？首页打开的情况如图：

一、性能分析工具介绍

利用谷歌插件PageSpeed和webpack的webpack-bundle-analyzer查看分析结果

可通过两个性能分析工具，来查看网页性能。一个是网页速度分析：PageSpeed Insights (by Google)；一个是Vue的webpack-bundle-analyzer分析工具。

1. PageSpeed Insights工具

1.1 PageSpeed简介

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

1.2 PageSpeed安装

安装方式

可在谷歌浏览器中下载安装该插件，并在Chrome的扩展器中启动网页速度分析的功能。

点击下载PageSpeed

2. webpack-bundle-analyzer工具

2.1 webpack-bundle-analyzer简介

是一款wepback的可视化资源分析工具，安装后，可通过运行命令，在浏览器中打开分析界面，可视化地查看分析结果，资源占用情况。

2.2 webpack-bundle-analyzer安装

由于项目中使用的nuxt框架，所以这里以nuxt为例

①安装命令

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

②配置方法

nuxt.config.js中analyze的配置如下：

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

③启动方法

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

可使用命令npm run build --report或yarn nuxt build -