vue首屏优化_vue首屏优化方案

我的小博客，除了引入了echarts组件其余小组件都是自己手写的。首屏加载竟然用了6s有时甚至10s开外，看的我头皮发麻，估计也劝退了很多访客。逼得我不得不优化，博客的加载效果是这样的：孙权的博客

一：分析问题

网上查到有一个依赖包分析工具叫webpack-bundle-anlyzer的，build后查出来我的依赖资源是如下图的。我特意在首屏加载时看了network，chunk-vendors.js在网络下载时的大小跟webpack-bundle-anlyzer分析的parsed size数据一样大都是780k，非常精确。工具使用详见下文

根据工具定位到比较大的文件是chunk-vendors.js和app.js都在700kb左右，Network调试可以看到页面就是在等待这两个文件下载结束后才开始渲染，白屏的6s就是因为这2个文件下载过程导致的阻塞。

二：处理问题

网上查了可以通过开启gzip压缩来减少超大文件的体积，我打算先压缩chunk-vendors.js等文件看看响应效果。GZip压缩倒是很简单，如下：

1、安装组件

npm install compression-webpack-plugin -S
1

2、vue.config.js配置如下

module.exports = {
  configureWebpack:config=>{
    // GZip压缩
    const CompressionPlugin = require('compression-webpack-plugin');
    config.plugins.push(
      new CompressionPlugin({
        algorithm:'gzip',
        test:/\.(js|css|woff|woff2|svg)$/,  // 要压缩的文件
        threshold:10240, // 压缩超过10k的数据
        deleteOriginalAssets:false, // 不删除压缩前的文件，如果浏览器不支持Gzip，则会加载源文件
        minRatio:0.8 // 压缩比大于0.8的文件将不会被压缩
      })
    );
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、压缩后的效果立竿见影，体积小了三分之二

压缩效果

4、服务器配置

压缩好了，但是服务器还是下载.js文件，而不下载.gz文件。还是以前一样的大小，首屏加载还是那么慢。去网上查到了如下解释

gz文件是在网络传输时候减小网络开销用的，在服务器配置开启gzip，请求会优先匹配同文件名的gz压缩格式返回，浏览器拿到之后会自动解压，你引用的是解压后的js或css文件
nginx 会优先匹配你的 gzip 文件来返回，如果没有就寻找相应资源进行 gzip 压缩再返回。
于是开始准备给服务器软件开启Gzip支持，但是我的服务是原生node直接起的，没法支持Gzip。查到express/ngix/apache都支持GZip功能，于是我用express框架重写了服务，并且使用了compression组件来支持GZip功能。也很便利，大概如下：

var express = require('express');
var compression = require('compression');   // 引入compresssion

var app = express();
app.use(compression());                     // 使用compression

http.createServer(app).listen(67);

app.get('/', (req, res) => {
  res.sendFile('index.html', {root: __dirname});
});
1
2
3
4
5
6
7
8
9
10
11

5、使用GZip后的效果

服务端配置GZip功能后，chunk-vendors的请求响应头显示Content-Encoding：gzip，文件下载时间163毫秒

大文件从6s的下载时间变成163ms简直unbelievable！但是network显示启动器项是索引，不懂啥意思？难道服务端配置了GZip配置后还有别的提速功能？

6、结论

目前的处理效果是首屏加载时间从6s-10s，缩减到1.4s-2s，基本满足我的需求。这个时间是我自己测的，可能也受网速等因素影响，如果亲们发现加载时间比2s多的，麻烦评论提示下。

暂时先这样，等有空再优化优化。

三：webpack-bundle-anlyzer的使用

分析工具在vuecli3.0的使用方法很干脆，安装配置结束后打开local host:888即可看到如上页面。注意该插件会固定监听8888端口，比如npm run serve/build它都会占用8888端口，所以不能同时看编译和打包时的分析页面。安装与配置如下：

1、npm intall webpack-bundle-analyzer // 安装依赖
2、在vue.config.js中配置如下
module.exports = {
  baseUrl:'./',
  chainWebpack:config=>{
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
  }
};
1
2
3
4
5
6
7
8
9
10