一般我们部署到服务器会使用nginx来做代理服务器，所有的请求都通过nginx转发，这里演示一下nginx配置gzip压缩文件后再返回。配置前先看看示例项目发布到线上的请求情况：
可以看到之前生成的chunk-vendors文件，大小725K，请求时间7.10秒，其中下载时间7.05秒，太慢了。配置一下nginx，打开gzip:
server { gzip on; gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css; }
这个配置作用是，当nginx服务器返回gzip_types中列出的内容类型时，先使用gzip进行压缩（当然，前提是请求方支持gzip），执行sudo nginx -s reload让该配置生效，此时刷新刚才的页面看一下效果:
同样的一个请求，请求内容的大小变成了216K，而下载时间直接降低到了1s多，效果显著！nginx还有gzip的其它配置项，比如可以用gzip_comp_level可以控制压缩率（当然压缩率更高可能意味着更大的服务器消耗），有兴趣的同学可以查看nginx文档。
3. webpack打包时直接使用gzip压缩
上一步骤中，返回内容是在请求服务器的时候使用gzip进行压缩的。这样存在的问题时，对于同一个资源的不同请求，反复压缩，这无疑会增加服务器的CPU和内存消耗。使用webpack的话，可以直接用compression-webpack-plugin插件对我们的代码进行压缩。先安装compression-webpack-plugin到dev依赖：
// yarn安装 yarn add compression-webpack-plugin -D // 或npm npm install compression-webpack-plugin --save-dev
简单配置，更多配置可了解官方文档：compression-webpack-plugin:
const CompressionPlugin = require('compression-webpack-plugin') module.exports = { // ... configureWebpack: { plugins: [ new CompressionPlugin({ test: /\.(js|css)?$/i, // 哪些文件要压缩 filename: '[path].gz[query]', // 压缩后的文件名 algorithm: 'gzip', // 使用gzip压缩 minRatio: 1, // 压缩率小于1才会压缩 deleteOriginalAssets: true // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false }) ] } }
打包一下看看dist下的js和css文件夹，现在文件都被压缩成了.gz：
经过压缩之后chunk-vendors仅有176K，比起原始的725K，压缩了近80%。像图片、字体之类的也可以用这个方法进行压缩，只要修改test配置项的正则表达式匹配这类文件即可。不过现在，还需要在nginx服务器配置一下静态压缩：
server { gzip on; gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css; gzip_static on; }
gzip_static设置为on之后，这样在访问资源的时候，如果存在“资源路径.gz”的文件，则会直接返回该文件，其优先级高于动态的gzip。现在访问一下页面：
如果把鼠标悬指到chunk-vendors的size上，可以看到提示“176KB transfered over network, resource size: 724K”。如果你的项目出现请求资源文件太大，可以试试gzip之类的压缩手段，相信有立竿见影的效果。
到此这篇关于Vue项目打包压缩的实现(让页面更快响应)的文章就介绍到这了,更多相关Vue项目打包压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: