vue项目上线前的优化工作或首屏加载慢的问题

办法1 在项目开发的过程中，能使用图标的尽量使用图标，关于图标的使用：我们可以使用阿里巴巴的矢量图标库。
使用方法如下：
官方地址

将font文件夹放到我们项目的assets静态资源文件夹中：

在min.js中导入图标库：

// 导入图表库
import './assets/font/iconfont.css'

在页面中使用：

<span class="icon iconfont 图标名称"></span>

图标名称可以打开font文件夹下的demo_index.html文件中找到。

办法2 对于大点的图片尽量放到服务器上，采用线上的方式，如果公司没有自己专门用来存放静态资源的服务器，我们可以把图片等静态资源放在CDN服务器上作加速

办法3 使用路由懒加载的方式加载路由, 原理是：使用哪个路由时值加载当前使用的路由，其他路由不加载。

首先，安装路由懒加载的插件npm insatll -S @babel/syntax-dynamic-import，安装完后需要一些相关的配置，如下：

在项目的babel.config.js文件中：

// 项目发布阶段需要用到的 babel 插件
const prodPlugins = []
if(process.env.NODE_ENV === 'production') {
  // 项目上线前将console输出去掉
  // 安装 npm install babel-plugin-transform-remove-console
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    // 产品发布时的插件数组
    ...prodPlugins,
    // 配置路由的懒加载
    "@babel/syntax-dynamic-import"
    // '@/babel/plugin-syntax-dynamic-import'
  ]
}

加载路由可以这样写：

// 第一种是原始的写法，第二种是采用路由懒加载的写法
import Roles from '../components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "User_Rights_Roles" */ '../components/power/Roles.vue')

办法4 以element-ui为例，采用线上的element-ui组件库，这样可以节约项目的加载时间，另外尽量不要全局安装element-ui，要按需去加载组件，这样可以减小项目体积，加快项目的运行速度，提高用户体验。

相关配置如下：
在项目的babel.config.js文件中的plugins数组中增加以下配置：

// 项目发布阶段需要用到的 babel 插件
const prodPlugins = []
if(process.env.NODE_ENV === 'production') {
  // 项目上线前将console输出去掉
  // 安装 npm install babel-plugin-transform-remove-console
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        // 采用线上的element-ui组件库
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 产品发布时的插件数组
    ...prodPlugins,
    // 配置路由的懒加载
    "@babel/syntax-dynamic-import"
    // '@/babel/plugin-syntax-dynamic-import'
  ]
}

然后删除在min.js中，导入的element-ui组件库， 最后在项目的public文件夹下的 index.html文件中将线上的element-ui 引入。

<!-- element-ui样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

<!-- element-ui的js文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

最后：对于一些导入使用的其他包也可以将线上的文件地址放到这里。以提高加载速度，从而提高项目的运行速度，用户体验。