前端性能优化（打包优化）

开发场景

后台管理系统vue2+ element ui，流水线部署后首屏加载时间过长（15s），需要优化加载速度。

打包分析

vue 项目可以通过添加–report命令：“build”: “vue-cli-service build --report”，打包后 dist 目录会生成 report.html 文件，用来分析各个文件的大小并针对性地优化性能
或者使用插件生成分析文件

npm install webpack-bundle-analyzer -D

在vue.config.js中引入插件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
      plugins: [
         new BundleAnalyzerPlugin()
      ]
  }
}

运行

npm run serve

在浏览器打开http://127.0.0.1:9999/查看文件分析，感觉插件太麻烦，个人使用第一种方法生成report.html

解决方案

使用gzip压缩静态资源文件

安装插件

npm install compression-webpack-plugin -D

在vue.config.js的configureWebpack下进行配置

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: {
      name: name,
	  resolve: {
	      alias: {
	        '@': resolve('src')
	      }
	    },
      plugins: [
	      new CompressionPlugin({
	        cache: false,                   // 不启用文件缓存
	        test: /\.(js|css|html)?$/i,     // 压缩文件格式
	        filename: '[path].gz[query]',   // 压缩后的文件名
	        algorithm: 'gzip',              // 使用gzip压缩
	        minRatio: 0.8                   // 压缩率小于1才会压缩
	      })	
      ],
}

对js文件进行压缩

安装插件

npm install uglifyjs-webpack-plugin -D

在vue.config.js中配置

const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
   plugins: [
      new CompressionPlugin({
        cache: false,                   // 不启用文件缓存
        test: /\.(js|css|html)?$/i,     // 压缩文件格式
        filename: '[path].gz[query]',   // 压缩后的文件名
        algorithm: 'gzip',              // 使用gzip压缩
        minRatio: 0.8                   // 压缩率小于1才会压缩
      }),
      new UglifyJsPlugin({
       uglifyOptions: {
          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']
          }
        },
        sourceMap: false,
        parallel: true
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, //控制打包生成js的个数
        minChunkSize: 100
      })
    ]
  }
}

公共代码抽离

在configureWebpack下新增以下代码，对公共代码进行提取

// 公共代码抽离
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: 'all',
            test: /node_modules/,
            name: 'vendor',
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100
          },
          common: {
            chunks: 'all',
            test: /[\\/]src[\\/]js[\\/]/,
            name: 'common',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60
          },
          styles: {
            name: 'styles',
            test: /\.(sa|sc|c)ss$/,
            chunks: 'all',
            enforce: true
          },
          runtimeChunk: {
            name: 'manifest'
          }
        }
      }
    }

使用CDN加速

在configureWebpack中增加externals，添加需要进行托管的资源

externals: {
     vue: 'Vue',
     'vue-router': 'VueRouter',
     axios: 'axios',
     echarts: 'echarts',
     'element-ui': 'ELEMENT',
     'quill': 'Quill'
},

在public下的index.html中引入对应资源

  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
  <script src="http://lib.baomitu.com/axios/1.2.1/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0-rc.1/echarts-en.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

可以看到，优化之后manifest.js文件还是比较大（3.03M）所以需要进一步优化代码

优化代码，封装、提取公共组件

由于这个后台管理项目是初创的，很多功能还没有完善，开发过程比较着急，很多的冗余代码，需要对一些组件进行封装、复用，比如table、dialog以及筛选条件的封装和提取，查看详情页面可以共用