vue项目性能优化

前言

在开发公司的管理系统的时候，发现打包上线之后的vendor体积特别的大，首屏响应时间约6-7秒，影响用户体验，故对这个项目做了性能优化。

代码包优化

屏蔽sourceMap
在文件config/index.js中，修改productionSourceMap为true，开启后可以对开发提示信息以及错误信息进行屏蔽，减少部分代码体积，

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css','svg'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

gzip压缩
gzip压缩有两种方法可以达到，一种是靠nginx服务器做压缩，一种是前端压缩出gzip，然后nginx开起gzip_static,每次读取文件的时候去查看是否有携带.gz结尾的文件。有就返回没有就返回源。
第一种：nginx压缩gzip，当请求nginx服务器的时候，nginx会对资源进行压缩之后在返回给客户端。在浏览器的response header中查看有没有content-encoding：gzip，有的话代表压缩返回成功。
nginx配置:

 #开启gzip压缩
gzip on;
gzip_buffers 4 16k;
gzip_comp_level 1;
gzip_http_version 1.0;
#压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

第二种：前端打包好gzip文件nginx开启gzip_static
前端：修改config/index.js文件中的 productionGzip为true，命令窗口运行npm install --save-dev compression-webpack-plugin，
修改build/webpack.prod.conf.js,
webpack.prod.conf.js配置：

 webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',//asset改为filename
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}
nginx配置：
  gzip on;
  gzip_static on;#开启
gzip_buffers 4 16k;
gzip_comp_level 1;
gzip_http_version 1.0;
#压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

通过代码屏蔽和gzip压缩之后能够达到大部分要求了，首屏加载在3-4S左右，但从页面上看，vendor体积还是挺大的。在1.1MB左右，我的项目中引入了echart，elementUi所以接下来一中优化是讲vendor包拆分为几个js文件。抽取出公共部分。
拆包
在build/webpack.prod.conf.js中添加插件，

 new webpack.optimize.CommonsChunkPlugin({
      name:["vender","element","echarts","i18n","echartsGl"],
      minChunks:Infinity
    }),

在build/webpack.base.conf.js中的entry中，

entry: {
    app: './src/main.js',
    echarts:["echarts"],
    element:"element-ui",
    vendor:["vue","vuex","vue-router"],
    i18n:["vue-i18n","axios"],
    echartsGl:["echarts-gl"]
  },

最后打包，得到的

路由懒加载
在router/index.js中修改。

const taskLabel = ()=>import("@/components/systemManage/paramsSetting/taskLabel/index")
const upgradeRule = ()=>import("@/components/systemManage/paramsSetting/upgradeRule/index")
const notFoundPage = ()=>import("@/components/404")
Vue.use(Router)
const routes=[
  {
    path: '/',
    name: 'dashBoard',
    component: dashBoard,
    icon:"icon-view-dashboard",
    meta:{title:"仪表盘"},
    hideChildren:true,
    children:[],
    role:"69",
  },

总结

通过此次的研究和了解，对项目性能优化和webpack有了更深的认识，vue项目的优化体积方面主要运用对webpack的配置，以达到减少体积的要求，还有其他很多的性能优化相关，还未知，我会一步一步的慢慢学习进步。