Vue项目打包后js文件压缩

前言

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

引入插件 `compression-webpack-plugin`

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

CompressionWebpackPlugin插件参数配置：官网 https://www.webpackjs.com/plugins/compression-webpack-plugin/

安装插件依赖

#指定版本
npm i compression-webpack-plugin@5.0.1
#或者
npm i -D compression-webpack-plugin
npm install compression-webpack-plugin --save

说明
- i 是install 的简写
- -S就是–save的简写
- -D就是–save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而–save会将包的名称及版本号放在dependencies里面。
修改 vue.config.js 文件，内容如下

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {publicPath: '/',productionSourceMap: false,configureWebpack: {...},chainWebpack: config => {config.resolve.alias.set('@', resolve('src'));config.when(process.env.NODE_ENV !== 'development',config => {// 提供带 Content-Encoding 编码的压缩版的资源config.plugin('compressionPlugin').use(new CompressionPlugin({filename: '[path].gz[query]', // 目标文件名algorithm: 'gzip',  // 压缩算法test: productionGzipExtensions, // 满足正则表达式的文件会被压缩threshold: 10240, // 只处理比这个值大的资源。按字节计算 10240=10KBminRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理deleteOriginalAssets: true // 是否删除原资源}));})}
}

更多详细配置请查看本项目代码，地址：https://gitee.com/zmzhou-star/easyboot.git

Vue项目打包

npm run build:prod

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

配置 compression-webpack-plugin 前

配置 compression-webpack-plugin 后

修改Nginx配置开启 gzip

# on为启用，off为关闭
gzip on;
# Nginx的动态压缩是对每个请求先压缩再输出，这样造成虚拟机浪费了很多cpu，解决这个问题可以利用nginx模块Gzip Precompression，这个模块的作用是对于需要压缩的文件，直接读取已经压缩好的文件(文件名为加.gz)，而不是动态压缩，对于不支持gzip的请求则读取原文件
gzip_static on;
# 设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。
gzip_min_length 1k;
# 获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得
gzip_buffers 16 64K;
# 识别http协议的版本,早期浏览器可能不支持gzip自解压,用户会看到乱码
gzip_http_version 1.1;
# gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;
gzip_comp_level 5;
# 对特定的MIME类型生效,其中'text/html’被系统强制启用
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
# 启用应答头"Vary: Accept-Encoding"
gzip_vary on;
# IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库
gzip_disable "MSIE [1-6].";

完整Nginx配置请看 Nginx安装

重启 nginx

systemctl reload nginx

测试效果，访问：`http://47.119.196.11`，F12打开开发者工具

压缩前

压缩后，发现响应时间得到了明显提升

Vue项目打包后js文件压缩相关推荐

快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
关于vue项目打包后提示图片文件路径错误的解决方法
vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片 ...
vue项目打包后修改接口地址
vue项目打包后修改接口地址我们在做vue项目时,总会遇到开发时用的测试地址和项目上线时用到的接口地址不同,再就是项目上线后,后期需要更改接口地址的情况.然而,如果没有一个配置文件,后期更换起来就只 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
(javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？
问题: (javascript)vue项目打包后,写的覆盖element的样式无效了.这是什么原因?描述: 在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因? main.js里的c ...
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
Vue项目打包后不能正常显示页面
项目场景: 通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上. 问题描述: 对 v ...

Vue项目打包后js文件压缩

前言

引入插件 `compression-webpack-plugin`

Vue项目打包

修改Nginx配置开启 gzip

测试效果，访问：`http://47.119.196.11`，F12打开开发者工具

Vue项目打包后js文件压缩相关推荐

最新文章

热门文章

Vue项目打包后js文件压缩

前言

引入插件 compression-webpack-plugin

Vue项目打包

修改Nginx配置 开启 gzip

测试效果，访问：http://47.119.196.11，F12打开开发者工具

Vue项目打包后js文件压缩相关推荐

最新文章

热门文章

引入插件 `compression-webpack-plugin`

修改Nginx配置开启 gzip

测试效果，访问：`http://47.119.196.11`，F12打开开发者工具