项目中我们会遇到静态文件过大,上线后网页加载慢。下面我们就来解决这类问题。
gzip加速
第一步安装依赖:
npm install --save-dev compression-webpack-plugin
这样会安装最新的版本,如果你webpack版本过低,则会安装失败。
会提示以上内容。这里就需要降低compression-webpack-plugin版本,这里我使用的是5.0.1版本
npm install --save--dev compression-webpack-plugin@5.0.1
在vue.config.js中加入以下代码
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
chainWebpack: config => {
//最小化代码
config.optimization.minimize(true);
//分割代码
config.optimization.splitChunks({
chunks: 'all'
});
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
test: /\.js$|\.html$|.\css$|\.otf$|\.ttf/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
}))
}
}
找到在nginx目录下的conf文件夹下的nginx.conf文件
将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;
服务器上打开浏览网页就会显示:
图片资源压缩
开启图片压缩,要先安装 image-webpack-loader 插件
npm install --save image-webpack-loader
使用npm安装命令后,在npm run build时可能会遇到以下报错
这里我使用cnpm解决的这类问题:
cnpm --save install image-webpack-loader
这里就会看到gifsicle已经安装好了
最后在vue.config.js中加入以下代码:
module.exports = {
//开启图片压缩
config.module.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
}
这是压缩后的效果
这是压缩前的效果
最后附上vue.config.js完整代码
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: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
}))
}
}