【前言】
最近正在开发一个项目，业务开发阶段基本告一段落。空闲之余，随手点了点环境，发现....额...首屏加载..有点慢啊，点开Network查看了一下，Load:7.98s。看到这个时间，嗯...，有优化的空间，趁此机会，赶紧动手。
【项目介绍】
组件框架：vue3(vue/cli@4.5.15)
UI框架：Naive UI
打包工具： Webpack4
【代码体积优化】
插件：compression-webpack-plugin
安装方式：
yarn安装
yarn add -D compression-webpack-plugin
npm安装
npm i -D compression-webpack-plugin
官方文档介绍：compression-webpack-plugin是提供带 Content-Encoding 编码的压缩版的资源。
顾名思义，它是用来压缩代码的，在打包目录中，生成一份文件的gz压缩文件，在Nginx作为反向代理时,启用gzip压缩，所以在nginx.conf中需要增加相关配置，避免nginx动态压缩给cpu造成更多压力。
以下为从官网文档上摘录的compression-webpack-plugin配置参数：
以下为Nginx关于开启gzip配置：
在vue.config.js中配置如下：
new CompressionWebpackPlugin({
threshold: 0,
minRatio: 0.6,
test: /\.(css|js)/i,
algorithm: 'gzip',
}),
【清除console】
在项目中有使用websocket，如果在处理函数中添加了console，这可能会造成页面卡顿，但在开发过程中，有时需要观察打印数据进行调试，为了不对生产环境造成影响或增加数据暴露的风险，将其删除是很有必要的。
首先考虑的插件是uglifyjs-webpack-plugin,当然，可以清除掉console打印，但是在测试过程中，发现使用mapbox的页面有报错，查询资料后，得到的解释是新版本的插件已不支持es6语法。选择降低版本，导致引入Naive UI中的Menu组件样式发生变化，因此选择了第二种方案--terser-webpack-plugin。
这个原因无法准确定位，希望大佬可以在评论区帮忙分析下原因。
插件：terser-webpack-plugin@4.2.3
安装方式:
yarn安装：
yarn add terser-webpack-plugin --save-dev
npm安装：
npm i terser-webpack-plugin --save-dev
安装注意事项: 如果项目中使用的webpack版本是v4，那么插件的版本也必须是v4版本，否则会有问题。
参数说明：官方文档请点击
在vue.config.js中的配置：
new TerserPlugin({
terserOptions: {
ecma: undefined,
parse: {},
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'],
},
ie8: false,
},
}),
【结束语】
在项目中，性能优化是尤其重要的一环，此次优化仅仅是针对打包体积，代码大小方面进行的优化，在代码层面，组件引入可以做懒加载处理，这样webpack在打包时，会从 chunk 中移除模块，只有在执行的时候才会引入；如果是ToC项目，使用cdn就近分发静态资源也是优化的一种方式；webpack同样可以使用代码分包的方式处理。
最后，编程不易，且编且珍惜，能够帮助各位的话，请点个赞吧~
