如何在vue-cli3里面压缩代码
有时候我们使用vue打包项目之后，发现打包的文件过大，从而影响到用户体验，那么如何解决这个问题呢？
答案是webpack。
webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用，当然webpack的功能远远不至于于此，还有非常多功能，不过我们这里仅讲解webpack的打包功能。
如何在vue-cli3里面使用呢？
1、首先需要安装gzip插件
npm i compression-webpack-plugin --D2、新建vue.config.js文件
//引入插件const CompresssionPlugin = require('compression-webpack-plugin')module.exports = {configureWebpack: {//vue-cli3的webpack配置plugins: [//插件选项new CompresssionPlugin({test: /\.js$|\.html$|\.css$/, //选择压缩的文件类型filename: "[path].gz[query]", //压缩后的文件名algorithm: "gzip", //使用gzip压缩deleteOriginalAssets: false, // 是否删除原文件threshold: 10240, //内容超过10KB进行压缩minRatio: 0.8 //压缩比例})]}}
3、然后就看到压缩后的代码
这样前端的工作就算完成了，剩下的就交给后端处理即可。
后端：
开启压缩需要服务器的支持，下面以nginx为例子：
server: {...gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 100;gzip_types application/javascript text/css text/xml;gzip_disable "MSIE [1-6]\.";gzip_vary on;}