如何应对vue项目优化的需求，掌握这“神器”就够了

该文章是博主针对之前做的一个vue移动端项目进行优化之后的总结，项目用的是vue-cli3 + spa。本文章针对的是简单的首屏加载优化，该文章还有后续版本。

分析

vue-cli 3.x自带了分析工具，直接运行vue-cli-service build --report生成report.html即可，生成的report.html在dist目录下。博主针对优化的项目目前没有进行任何优化。

在浏览器中打开report.html。

用浏览器F12进入开发工具，选中Network并只过滤查看JS。此时，app.js和chunk-vendors.js的大小分别为552KBKB和679KB、请求时间为838ms和1.52s。

 

优化

1.路由懒加载

（1）在路由router.js文件中，将原来的静态导入方式

import NotFound from '@/components/NotFound'

{
        path: '/notFound',
        name: 'notFound',
        component: NotFound,
}

改为

{
        path: '/notFound',
        name: 'notFound',
        component: () => import('@/components/NotFound.vue'),
}

（2）参照官方文档，由于博主优化的项目为移动端项目，故直接移除prefetch插件。关闭浏览器在页面加载完成后提前加载用户未来可能访问的内容。下图为官方文档部分截图。

优化后的图片如下，chunk-vendors文件是首屏加载的js文件之一。

开启路由懒加载后，app.js和chunk-vendors.js的大小分别变成54.1KB和606KB、请求时间变成319ms和1.49s。

总结：路由懒加载是很有必要的。如果没采用懒加载，会vue初始化的时候，将所有用到的内容全部提前加载，这是非常不好的。建议是在初期开发阶段就应该采用懒加载，避免后续项目重新修改花费大量时间。

2.gzip压缩

在vue.config.js文件中配置gzip插件

const CompressionPlugin = require('compression-webpack-plugin');

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置
            config.mode = 'production';
            return {
                plugins: [
                    new CompressionPlugin({
                        algorithm: 'gzip',
                        test: /\.js$|\.html$|\.css/, // 匹配文件名
                        threshold: 10240, // 对超过10k的数据进行压缩
                        deleteOriginalAssets: false, // 是否删除原文件
                        minRatio: 0.8
                    })
                ]
            }
        }
    },

执行build打包之后，如图所示。gzip的体积比未打包时候小了很多。

由于我这里用nginx做web服务器，所以还需要在nginx中进行配置，开启nginx的gzip。无论是用docker配置nginx还是其他，都可以采用以下方式进行配置。

server {
    gzip_static on;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied  any;
    gzip_vary on;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
}

响应头中出现Content-Encoding:gzip，即表示gzip压缩成功。

 

开启gzip压缩之后效果如下。app.js和chunk-vendors.js的大小分别变成15.6KB和191KB、请求时间变成135ms和333ms。

总结：开启gzip压缩之后，首屏加载的js文件等体积明显缩小。这是博主非常推荐使用的，也是大部分vue网站都采用的一种方式。

3.css禁止拆分

未优化前，有5个文件

在vue.config.js文件加入

// css相关配置
css: {
     // 是否使用css分离插件 ExtractTextPlugin
     extract: false,
     //是否开启 CSS source maps
     sourceMap: false,
}

优化后，5个文件变成1个文件

总结：在进行禁止css拆分的时，会加首屏加载的js文件体积，这是由于css文件没有被单独拆分出来。