近期老吴做了一个微信公众号小项目，采用的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大小一半不到，可以看看下图中的数据：

开启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 uriuri/ /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的优化方案