vue项目打包优化

前段时间腾讯云有优惠，买了个1核1G的云主机来放练手的项目，经过一波操作终于部署成功了，but首屏打开贼慢，于是来一波性能优化之旅。

首先看看项目加载了哪些文件

打马的部分是服务器的公网ip，我们发现加载最耗时的主要是两个文件一个是首屏的大图，另一个是vendor.2b23f6448b79423c7a25.js这个文件。下面我们来着手优化:

1、vue路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

路由懒加载是优化效果最明显的,因为路由的懒加载意味着当路由被访问的时候才加载对应组件，当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率，我们先来优化路由，我们之前的路由都是下面这样的写法，这样的写法会造成进入首页时，需要加载的内容过多，时间过长，首屏长时间空白。

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/recommend'
    },
    {
      path: '/recommend',
      component: recommend
    },
    {
      path: '/singer',
      component: singer,
      children: [
        {
          path: ':id',
          component: singerDetail
        }
      ]
    }
  ]
})

我们应当使用懒加载的写法，如下

export const normalRouter = [
  {
    path: '/',
    component: login
  },
  {
    path: '/index',
    component: resolve => require(['@/pages/index/index'], resolve),
    redirect: '/home',
    name: '首页',
    children: [
      {
        path: '/home',
        component: resolve => require(['@/pages/home/home'], resolve),
        name: '工作台',
        icon: 'el-icon-menu'
      },
    
      {
        path: '/404',
        component: resolve => require(['@/components/404/404'], resolve),
        name: '404',
        icon: 'el-icon-menu'
      }
    ]
  },
  {
    path: '*',
    redirect: '/404'
  }
];

配置完路由后，执行npm run build就会发现不同路由对应的组件分割成不同的代码块

2、代码压缩(gzip)

这个是除了路由懒加载之外，优化效果其次明显的。我们找到nginx的配置文件nginx.conf,在http对象中加上以下代码

gzip on; 
gzip_comp_level 5; 
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;

对比最开始的图，首屏加载时间从25.89s优化到12.64s，整整快了13s

3、禁止vue打包生产map文件

map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

找到vue项目下的config/index.js文件，搜索到productionSourceMap,把后面的值改成false

首屏加载时间从12.64s到6.97s