Vue项目首页加载优化方法

近期老吴做了一个微信公众号小项目,采用的Vant框架。但是打包部署到生产环境后首页加载特别的慢,经过排查发现进入首页时加载的js特别多,而且还很大。一个简单的首页,居然要加载好几兆的内容,这明显就很不合理了。

因此在网上查了一下Vue项目优化方法,在此记录一下。经实际操作,效果明显。主要从三个方面进行优化:

去除编译文件中的map文件

修改vue.config.js中的productionSourceMap

module.exports = {
  publicPath: process.env.VUE_APP_PUBLIC_PATH,

  // 根据编译时设置的环境,如果是生产环境,则设置false
  // false:表示去除map文件
  productionSourceMap: !isProEnv
}

路由加载改为懒加载

懒加载的路由声明方式:

{
    path: '/course',
    name: 'course',
    component: resovle => require(['@/components/Layout'], resovle)
}

非懒加载的路由声明方式:

import Layout from '@/components/Layout'
{
    path: '/mine',
    name: 'mine',
    component: Layout
}

nginx开启Gzip

这个优化效果非常明显,往往压缩有的js大小一半不到,可以看看下图中的数据:
js压缩前后体积大小对比

开启Gzip后,前端将直接加载.gz文件,这样就比直接加载.js文件至少节省50%的时间。在并发较高的时候,也可以降低服务器带宽压力。具体配置如下:

server {
        listen 80;
        server_name www.xxxxx.com;
	
	# 开启Gzip的配置
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";

        location /  {
                try_files $uri $uri/ /index.html;
                root /usr/wx/html/dist;
        }
}

经过上述三种优化手段后,系统首页加载明显变快。

公共CDN问题

在系统运行过程还出现了一个问题,就是页面中引用了某些公共CDN的文件,例如:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

但是,在2021年7月7日中午的时候,突然收到消息说页面无法访问了。由于当前系统使用人数较少,我也没有立即去排查。晚上到家后查了一下,发现就是这个文件长时间无法加载到。就立即使用某些手段下载了一个文件,放在系统本地环境已解决这个问题。

在这个地方我想表达的是,某些公共免费的CDN稳定性问题,也是导致页面访问变慢的原因。因此,在使用CDN的时候,选择一个稳定、快速的CDN也变得相对重要了

参考资料

vue页面首次加载缓慢原因及解决方案
发布前端项目时因chunk-vendors过大导致首屏加载太慢,Vue Build时chunk-vendors的优化方案

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×