Vue 项目性能优化 (图片优化)

最新推荐文章于 2025-10-28 06:02:37 发布

原创最新推荐文章于 2025-10-28 06:02:37 发布 · 962 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了在Vue项目中如何使用Webpack对图片进行压缩，以提高项目性能。通过在webpack.base.conf.js配置url-loader和image-webpack-loader，可以将小图片转化为base64，大图片则进行压缩处理，减少资源加载时间。

Webpack 对图片进行压缩

在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片：

首先，安装 image-webpack-loader ：

npm install image-webpack-loader --save-dev

然后，在 webpack.base.conf.js 中进行配置：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}