如何解决webpack打包后，dist文件过大的问题

Posted 2023-03-25

参考技术A webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目
打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。

Vue项目打包后js文件压缩

参考技术A

这段时间因为免费试用了 https://free.aliyun.com/ 一台阿里云的服务器，配置是 2核4G 2M，
因为带宽太低了，每次在第一次加载的时候太慢了，通过F12调试，发现主要是因为加载的 js 过大而引起的。因此本文将主要讲解Vue项目打包后js、css、svg等文件过大的解决办法。

通过引入 compression-webpack-plugin 插件来打包，然后开启 nginx gzip 来解决问题

配置 compression-webpack-plugin 前后打包对比，我们查看 dist目录，能够发现大于10KB的 js ， css 等文件已经被压缩了