vue 性能优化方案
        首先说明一下，我优化的项目是基于vue3 + ts的一个项目，使用的是webpack5的版本，不一定非要是webpack5经测试4也可以正常使用

        若想查看自己当前项目的webpack版本，可以找node_modules目录下面的webpack/package.json文件，查看文件中的version，如下图

下面开始进入正题

一、关闭productionSourceMap

         productionSourceMap的作用在于定位问题，打包时会生成.map文件，在生产环境就可以在浏览器查看到输出的信息具体是在哪一行，但相应的包的体积也会变大，将其设置为false则不生成.map文件
```
module.exports = defineConfig({
  productionSourceMap: false,
})
```
二、开启gzip

gzip并不能很好的减小dist包的体积，个人觉的主要作用是在你build后，会生成两份代码，一份压缩的，一份未压缩的，在请求时服务器会优先选择压缩的版本进行返回
```
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV !== "development";
module.exports = {
  configureWebpack: config => {
    // 若是生产环境，则执行以下代码
    if (isProduction) {
      //gzip压缩
      const productionGzipExtensions = ["html", "js", "css"];
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path][base].gz", // 有的版本是[path].gz[query] 根据情况而定
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false, // 删除原文件
        })
      );
    }
  }
}
```
上面配置完后，还需配置下nginx

在ngxin.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查看效果了，因为我这是测试项目，没有多少东西，所以结果时间相差不大，大家可以自行测试

                                                                未压缩的

                                                                压缩后的

三、开启CDN

CDN主要是将一些可以在CDN服务器上引用到的插件不进行打包，直接通过CDN链接，从而减小包的体积

1、首先配置好各个链接地址

若不知道地址是什么的可通过BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务进行查询，下面是关于cdn链接地址后缀的介绍

Vue的各种版本介绍：

1. cjs（两个版本都是完整版，包含编译器）

        vue.cjs.js

        vue.cjs.prod.js（开发版，代码进行了压缩）

2. global（这四个版本都可以在浏览器中直接通过scripts标签导入，导入之后会增加一个全局的Vue对象）

        vue.global.js（完整版，包含编译器和运行时）

        vue.global.prod.js（完整版，包含编译器和运行时，这是开发版本，代码进行了压缩）         vue.runtime.global.js

        vue.runtime.global.prod.js

3. browser（四个版本都包含esm，浏览器的原生模块化方式，可以直接通过
<% } %>

四、代码压缩

使用uglifyjs-webpack-plugin插件进行对js的代码压缩优化

安装插件 npm i -D uglifyjs-webpack-plugin

然后配置如下内容


const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
module.exports = defineConfig({
  configureWebpack: config => { 
    // 代码压缩
    config.plugins.push(
      new UglifyJsPlugin({
          uglifyOptions: {
            //生产环境自动删除console
            compress: {
                drop_debugger: true,
                drop_console: true,
                pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          parallel: true
      })
    )
  }
})

五、图片压缩

使用image-webpack-loader插件将图片进行压缩

此插件会将你的图片压缩到一定大小，而一些小图片会被直接压缩成base64格式

安装插件 npm install image-webpack-loader --save-dev

我看到有些人也会使用url-loader来压缩图片，url-loader只适用于比较小的图片资源，如果图片很大会导致构建出的.js文件加载缓慢。

一般会配置小图片使用url-loader完成，而大图片则使用image-webpack-loader进行压缩，不过我测试了一下，发现直接使用image-webpack-loader也可以直接将小图片压缩为base64，所以我这里就直接配置了image-webpack-loader，没有去进行拆分

配置如下信息


module.exports = defineConfig({
  chainWebpack: config => { 
    // ============压缩图片 start============
    config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    .end()
  }
})

目前了解的优化手段大概是这些，如果还有其他方式，还希望老板们也可以分享一下，大家相互学习！

vue 性能优化方案

一、关闭productionSourceMap

二、开启gzip

三、开启CDN

四、代码压缩

五、图片压缩