- 需求:网站内图片大小不超过100kb
项目中我们会遇到静态文件过大,上线后网页加载慢。
gzip加速
第一步安装依赖:
npm install --save-dev compression-webpack-plugin
(这样会安装最新的版本,如果你webpack版本过低,则会安装失败。)
会提示以上内容。这里就需要降低compression-webpack-plugin版本,这里我使用的是5.0.1版本
npm install --save--dev [email protected]
图片资源压缩
npm install --save image-webpack-loader
使用npm安装命令后,安装失败的话需要调整
cnpm --save install image-webpack-loader
这里就会看到gifsicle已经安装好了
const CompressionPlugin = require("compression-webpack-plugin") module.exports = { chainWebpack: config => { //最小化代码 config.optimization.minimize(true); //分割代码 config.optimization.splitChunks({ chunks: 'all' }); //开启图片压缩 config.module.rule('images') .test(/.(png|jpe?g|gif|svg)(?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) //开启gzip加速 config.plugin('compressionPlugin') .use(new CompressionPlugin({ test: /.js$|.html$|.css$|.otf$|.ttf/, // 匹配文件名 threshold: 102400, // 对超过100kb的数据压缩 deleteOriginalAssets: false // 不删除源文件 })) }, }
本人亲测实效(图片可以自己设置最大,我这里是设置100kb)
后端配合修改
将nginx.conf文件中的http加入以下代码
gzip on; gzip_static on; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)