Vue项目性能优化实践

    我勒个去，之前从来没有优化过项目，真的是一边摸索，一边实践，简直要吐血了。

    个人感觉：项目优化要整体把控项目，每个配置和组件都应该做到心中有数，不说精通，但是要知道那些配置是干嘛用的！

    废话不多说，我用的vue版本是：vue-cli4.0以上，没有build文件夹，项目只提供了两个配置文件：babel.config.js 和 vue.config.js，好像项目中没有这些文件，可以按照官网配置自己建。

    首先，我打完包后发现dist包竟然超过了2M多，这怎么能行，开始发功。我的优化招式如下：

1、项目中的第三方包是element-UI，在main.js文件中是全局引入的，先从它改起，把全局引入改为局部引入，我再另一篇文章中介绍过，可以参考下：

https://blog.csdn.net/qq_38244874/article/details/108448113

2、发现项目还是很大，于是想进一步压缩element-UI包，可以采用cdn引入的方式：

    在index.html中加入这三句话：

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>

    在babel.config.js文件中加入如下代码：

module.exports = {
    configureWebpack: {
        externals: {
          'vue': 'Vue',
          'element-ui': 'ELEMENT'
        }
      },
}

    然后把main.js中有关element-UI的引入给删掉，这样就成功的把第三方包给链接进来了，这样做的好处是，服务器不用下载第三方包，而是通过别的服务器下载，我们直接使用就好了，可以缩短响应时间。

3、vue 项目开启gzip压缩和部署 nginx 开启gzip优化性能。

    安装gzip插件：

npm install --save-dev compression-webpack-plugin

    关闭productionSourceMap, 贴上vue.config.js文件：

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';

// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    productionSourceMap: false,
    configureWebpack: config => {
        // 生产环境相关配置
        if (isProduction) {
            //gzip压缩
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                    deleteOriginalAssets: false // 删除原文件
                })
            )
        }
    }
}

    nginx也必须开启gzip才能生效，打开nginx文件夹下的nginx.conf文件，在http模块中写入以下内容

  # 开启gzip
    gzip on;

    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 1k;

    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
    gzip_comp_level 2;

    # 进行压缩的文件类型。javascript有多种形式，后面的图片压缩不需要的可以自行删除
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    # 设置压缩所需要的缓冲区大小     
    gzip_buffers 4 16k;

    然后输入命令nginx -s reload重启nginx服务

    如果后端nginx开启了gzip，可以从network中的Content-Encoding中看到gzip

4、.图片压缩

      先安装插件

npm install image-webpack-loader --save-dev

     在vue.config.js中的chainWebpack中新增以下代码：

• config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })
        .end()

  我的性能优化到此结束，当然还有很多好的优化方法，之后会继续分享。