工作中使用过的性能优化手段

1.CDN

作用：减小代码体积，减轻服务器压力，提高相应速度

使用对象：代码第三方库，静态资源

2.强缓存

对长期不变的资源来说，使用强缓存是很有必要的事情

nginx配置：

    server {
        // 针对图片等资源，缓存10天
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
            expires 10d;
        }
    }
    

3.GZIP压缩

对文件进行GZIP处理压缩生成.gz文件，大大减少代码文件体积，如果浏览器支持解析gz文件的话就可以返回该gz文件

相关请求头content-encoding:gzip

webpack plugin可以使用CompressionWebpackPlugin（如果在nginx配置了可以不用开启这个），在vue2.5版本以下会有此配置，不过还是需要在nginx开启gzip

nginx配置：

  server {
      gzip on;
      gzip_proxied any;
      gzip_comp_level 6;
      gzip_buffers 16 8k;
      gzip_types image/svg+xml text/plain text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf image/jpeg image/gif image/png image/x-icon;
  }

4.组件复用优化，去掉无关代码

这个很常见的吧，代码开发完都要自己再看一下有什么优化的地方，养成习惯

5.代码打包文件分析

当打包后的文件有某个过大时，我们想知道它里面放了什么文件，就可以用这个webpack-bundle-analyzer，打包后它就会自动弹出一个网页显示代码打包情况

在webpack的plugins模块配置即可

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

...
plugins: [
    new BundleAnalyzerPlugin()
]

6.懒加载

感觉这不用再多说了，都会，都会的

ES6懒加载: () => import('文件路径...')
AMD懒加载: (resolve) => require(['文件路径...'], resolve)

7.三方库分割

Vue的默认配置会把三方库都给打包到一个文件里，通常会导致这个文件加载太久，影响用户首页体验，所以我们得把它继续拆分成多个文件，以为http是并行请求，所以多个小文件相对单个大文件会更快（以echarts为例）

    // 非vue-cli-service
    // webpack.prod.conf.js
    new webpack.optimize.CommonsChunkPlugin({
      name: 'echarts',
      minChunks(module) {
        return (
          module.resource &&
          /.js$/.test(module.resource) &&
          module.resource.indexOf(
            // 该路径是三方库在node_modules文件中的实际引用路径，一定要找正确才有效
            path.join(__dirname, '../node_modules/echarts')
          ) === 0
        )
      },
      // children: true,
      // async: 'children-async'
    }),

    // vue-cli-service
    // vue.config.js文件configureWebpack配置下的optimization模块
    splitChunks: {
        chunks: 'async',
        minSize: 20000,
        minChunks: 1,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        enforceSizeThreshold: 50000,
        cacheGroups: {
          defaultVendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            reuseExistingChunk: true
          },
          // 添加这个配置会将echarts文件单独打包成echarts.js
          vendor_2: {
            test: /[\\/]node_modules[\\/](_echarts@5.3.0@echarts)[\\/]/,
            name: 'echarts',
            chunks: 'all'
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }

还有其它的一些性能优化方法如Web Worker等还没接触过，后面有时间的话还是需要学习下！