vue首屏优化

原创

已于 2023-02-11 22:27:37 修改 · 403 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #webpack #前端框架 #前端

于 2023-02-06 23:39:30 首次发布

作者通过分析工具webpack-bundle-anlyzer发现首屏加载慢的问题源于chunk-vendors.js和app.js，然后采用gzip压缩减少了文件体积，通过在express服务中启用compression中间件实现了服务器端的GZip支持，将首屏加载时间从6s-10s降低到1.4s-2s。

我的小博客，除了引入了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个文件下载过程导致的阻塞。
webpack-bundle-anlyzer的分析结果

二：处理问题

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

1、安装组件

npm install compression-webpack-plugin -S

2、vue.config.js配置如下

module.exports = {
   
   
  configureWebpack:config=>{
   
   
    // GZip压缩
    const CompressionPlugin = require('compression-webpack-plugin');
    config.plugins.push(
      new