如何在vue-cli3里面压缩代码

Posted 2021-04-16 学前端ossjk

有时候我们使用vue打包项目之后，发现打包的文件过大，从而影响到用户体验，那么如何解决这个问题呢？

答案是webpack。

        webpack 是一个模块打包器。webpack 的主要目标是将 javascript 文件打包在一起,打包后的文件用于在浏览器中使用，当然webpack的功能远远不至于于此，还有非常多功能，不过我们这里仅讲解webpack的打包功能。

如何在vue-cli3里面使用呢？

1、首先需要安装gzip插件

npm i compression-webpack-plugin --D

2、新建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 gzip_buffers 32 4K; #缓冲(压缩在内存中缓冲几块? 每块多大?) gzip_comp_level 6; #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源) gzip_min_length 100; #开始压缩的最小长度(再小就不要压缩了,意义不在) gzip_types application/javascript text/css text/xml; #对哪些类型的文件用压缩 如txt,xml,html ,css gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持） gzip_vary on; #是否传输gzip压缩标志}