vue-element-admin开启gzip压缩 25/100 发布文章 LiangBlog
new 进行gzip压缩需要下载一个插件
npm install compression-webpack-plugin@6.1.1
注意:6.1.1之后的版本里可能会出现undefind等错误 需要降级处理 在vue.config.js里配置
const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
config.resolve.alias.set('@', resolve('src'))
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false
}))
注意区分生产和开发环境 然后可以 npm run build:prod
部署到服务器上,需要nginx开启gzip的方法,在nginx.config里配置。注意需要查看自己文件权限,不然访问会出错。最好chmod 755 -R dist (dist是打包后的文件)
在需要的server下添加
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml application/font-woff text/css image/svg+xml;
gzip_static on;
gzip_comp_level 5;
gzip_proxied any;
gzip_vary on;
如下图,即可: 查看是否开启gzip,chrome浏览器为例子,F12,打开
鼠标右键time,点击response Headers -> content-encoding,即可查看
进行gzip压缩需要下载一个插件
npm install compression-webpack-plugin@6.1.1 注意:6.1.1之后的版本里可能会出现undefind等错误 需要降级处理 在vue.config.js里配置
const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
config.resolve.alias.set('@', resolve('src'))
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false
}))
注意区分生产和开发环境 然后可以 npm run build:prod
部署到服务器上,需要nginx开启gzip的方法,在nginx.config里配置。注意需要查看自己文件权限,不然访问会出错。最好chmod 755 -R dist (dist是打包后的文件)
在需要的server下添加
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml application/font-woff text/css image/svg+xml;
gzip_static on;
gzip_comp_level 5;
gzip_proxied any;
gzip_vary on;
如下图,即可: 在这里插入图片描述 查看是否开启gzip,chrome浏览器为例子,F12,打开 在这里插入图片描述
鼠标右键time,点击response Headers -> content-encoding,即可查看 在这里插入图片描述
帮助文档 快捷键目录标题文本样式列表链接代码片表格注脚注释自定义列表LaTeX 数学公式插入甘特图插入UML图插入Mermaid流程图插入Flowchart流程图插入类图 快捷键
Markdown 图标 快捷键 撤销 Ctrl /⌘+Z 重做 Ctrl /⌘+Y 加粗 Ctrl /⌘+B 斜体 Ctrl /⌘+I 标题 Ctrl /⌘+Shift +H 有序列表 Ctrl /⌘+Shift +O 无序列表 Ctrl /⌘+Shift +U 待办列表 Ctrl /⌘+Shift +C 插入代码 Ctrl /⌘+Shift +K 插入链接 Ctrl /⌘+Shift +L 插入图片 Ctrl /⌘+Shift +G 查找 Ctrl /⌘+F 替换 Ctrl /⌘+G 暂无目录 文章内添加@[TOC]自动根据文章标题生成目录
Markdown 已选中 1417 字数 45 行数 当前行 45, 当前列 0HTML 902 字数 29 段落