vue项目优化实战-开启gzip压缩
Posted 前端开发笔记
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目优化实战-开启gzip压缩相关的知识,希望对你有一定的参考价值。
【文末有福利】
1, 开启gzip压缩
首先安装ompression-webpack-plugin这个插件
npm i compression-webpack-plugin@5.0.1
在vue.config.js中引入
const CompressionWebpackPlugin = require('compression-webpack-plugin')
//然后配置需要压缩的资源,依次是,js文件,css样式文件,字体文件,json文件,jpg类型的图片,png类型的图片
const productionGzipExtensions = ['js', 'css',’ttf’,’json’,’jpg’,’png’]
在configureWebpack中的plugins中添加
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
]
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 8;
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
gzip_vary on;
2,删除console.log
在调试项目中,经常会用console打印结果进行调试,当我们发布的时候又不能将这些打印的结果开放出去,所以我们需要删除console。这就需要安装一个插件。
安装插件
npm install terser-webpack-plugin --save-dev
如果是webpack4,则使用
npm install terser-webpack-plugin@4.2.3 --save-dev
在vue.config.js中引入
const TerserPlugin = require('terser-webpack-plugin')
对象中配置如下代码
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
},
},
}),
],
以上就是在项目中比较常用的优化措施了。
加入“前端开发笔记第二小组”,即可获得价值
399元的前端课程一份
二维码截止日期3/11
扫描二维码获取
更多精彩
前端开发笔记
点个
在看
你最好看
以上是关于vue项目优化实战-开启gzip压缩的主要内容,如果未能解决你的问题,请参考以下文章
vite3+vue3 项目打包优化实战之-视图分析(rollup-plugin-visualizer)CDN引入依赖分包gzip压缩history404问题