1、vue打包优化

**前言！！！**
项目是20年启动的项目 持续更新至今  vue版本2+  ,vue-cli 4.4，如遇配置相关等报错 查阅官方文档！！

1、添加指令查看打包分析结果

paakage.json 文件
打包指令添加 --report

2、查看分析结果
执行指令后会在输出文件夹（默认dist）中多一个report.html 打开

打开后

面积大的就是打包体积越大 针对性的优化

执行build 打包出来25M左右

以下正题

看结果中 echarts pdfH5、 element-ui等相对较大

3、剥离三方库 cdn方式 加载

configureWebpack:{
	externals:{
            axios:'axios',
            'vue-router': 'VueRouter',
            'vue': 'Vue',
            'Vuex': 'Vuex',
            'element-ui': 'ELEMENT',
            'echarts': 'ECHARTS',
            'pdfh5': 'PDFH5',
       },
}

在index.html中添加对应cnd ！！！

后再次执行打包指令 包体积小了10M左右 （编号方便区分每次的结果 dist2）

4、 productionSourceMap: false, // 打包是否需要map文件

5、gzip 代码压缩

npm i  compression-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");


// --配置
chainWebpack:config=>{
			//  生产打包压缩
            if (process.env.NODE_ENV === "production") { 
                config.plugin("compressionPlugin").use(
                    new CompressionWebpackPlugin({
                      test: /.(js|css|less|scss)$/, // 匹配文件名
                      threshold: 10240, // 对超过10k的数据压缩
                      minRatio: 0.8,
                      deleteOriginalAssets: true // 是否删除源文件
                    })
                  );
            }
}

再次执行build 后

6、由于图片已经压缩过就不再展示 压缩地址 https://tinypng.com/
到此结束

由原来25M到 优化到3M左右 在可接受范围内 。