我使用 vue-cli 版本为 4.4.2
主要的问题就是build出来的文件比较大，所以首屏加载时比较慢。
以下是我的一些优化方法，供大家参考。
PS:当初研究优化时，查询了很多资料。但是现在已经记不得具体网站了。如果有知道的可以联系我，我会注明出处。

1.cdn内容分发网络

2.路由按需加载

会把js拆分成多个文件，按需加载。

const routes = [{
        path: '/',
        name: 'home',
        component: (resolve) => require(['./views/Home.vue'], resolve),
    },
    {
        path: '/search',
        name: 'search',
        component: (resolve) => require(['./views/Search.vue'], resolve),
        meta: {
            title: '搜索'
        }
    },
    {
        path: '/article/:id',
        name: 'article',
        component: (resolve) => require(['./views/Article.vue'], resolve)
    },
    {
        path: '*',
        name: '404',
        component: (resolve) => require(['./views/404.vue'], resolve),
        meta: {
            title: '页面逃走了'
        }
    }
];

3.gzip压缩

首先要安装依赖

npm install --save-dev compression-webpack-plugin

vue.config,js进行配置（没有就在src目录创建一个，会自动加载）

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css'];
// webpack配置
module.exports = {
    // webpack配置
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //匹配文件名
                threshold: 10240, //对10K以上的数据进行压缩
                minRatio: 0.8,
                deleteOriginalAssets: false, //是否删除源文件
            })
        ]
    },
};

项目打包

查看是否压缩成功

如果没有成功，说明你的服务端没有配置。需要修改服务器配置，这里使用的是apache。
httpd.conf 文件中添加如下代码

//这个有的人说不添加，网站无法正常显示。我没测试过，为了省事都加上。
LoadModule headers_module modules/mod_headers.so
LoadModule deflate_module modules/mod_deflate.so

<IfModule mod_deflate.c>
# 告诉 apache 对传输到浏览器的内容进行压缩
SetOutputFilter DEFLATE
# 压缩等级 9
DeflateCompressionLevel 9
#设置不对后缀gif，jpg，jpeg，png的图片文件进行压缩
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

重启服务器

4.项目拆分

我的项目是个人博客平台，所以说有前台和后台。于是可以将前后台拆分，变成一个多页面应用。这样前台加载时就不会加载后台相关内容了。