vue项目文件压缩，图片压缩vue.config.js配置优化

项目中我们会遇到静态文件过大，上线后网页加载慢。下面我们就来解决这类问题。

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 // 不删除源文件
          }))
      }
}