使用uniapp开发微信小程序时，图片处理最佳实践

最新推荐文章于 2025-04-30 10:06:44 发布

江阳小道

最新推荐文章于 2025-04-30 10:06:44 发布

阅读量1.8k

点赞数 30

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： uni-app 微信小程序 vue 前端

本文链接：https://blog.csdn.net/cnpath/article/details/140232675

Web前端专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

前言：受限于微信小程序对包体积的限制，小程序包体积优化一直是一个让人头疼的问题。其中最简单也最容易做到的就是把图片放到CDN或者服务器，就能减小包体积。

但uniapp由于框架的限制存在一个问题，无法通过简单的配置，实现编译后将图片路径自动替换成CDN或者服务器连接。网上的一些通过配置全局变量实现链接替换的方式也不够优雅，于是就有了这篇文章。

一、定义全局方法或者变量

网上一般的解决方案是，定义全局方法或者变量，然后在页面中使用。

在`vue2`中的写法

Vue.prototype.staticUrl = (img) {
  return `https://www.xxx.com/${img}`
}

在`vue3`中的写法

app.config.globalProperties.staticUrl = (img) {
  return `https://www.xxx.com/${img}`
}

使用方法

<image :src="staticUrl('/static/images/logo.png')"></image>

这个方案虽然写起来简单，但不够灵活，一旦页面图片过多，每个路径都需要进行转换，而且写法也不够优雅，实在不是一个好的解决方案。

二、自定义loader，解析指定前缀

设置指定的前缀的，通过自定义loader的方式动态替换前缀为CDN地址。

在`vue2`中使用

创建一个replace-image-loader.js的文件，使用正则匹配，替换所有指定的图片路径前缀。

module.exports = function(source) {
  return source.replace(/@images\//g, 'https://www.xxx.com/');
};

修改 vue.config.js的配置文件，使用你创建的loader。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('replace-image')
      .test(/\.(js|vue)$/)
      .use('replace-image-loader')
      .loader(path.resolve(__dirname, 'replace-image-loader.js'))
      .end();
  }
};

在`vue3`中使用

创建一个插件文件vite-plugin-image-replace.js的文件，使用正则匹配，替换所有指定的图片路径前缀。

export default function imageReplacePlugin() {
  return {
    name: 'vite-plugin-image-replace',
    transform(code, id) {
      // 替换为 CDN 地址
      const replacedCode = code.replace(/@images\//g, 'https://www.xxx.com/');
      
      return {
        code: replacedCode,
        map: null,
      };
    }
  };
}

修改vite.config.js

export default defineConfig({
    plugins: [imageReplacePlugin()],
});

使用方法

<image src="@images/static/images/logo.png"></image>

这个方法虽然不错，但引入了@image这个前缀，图片过多就增加了额外的成本，以后项目维护起来也麻烦。

注意：这个方案来源于网络，未经过严格验证，如果发现问题欢迎指出。

三、只通过配置实现图片链接的动态替换（推荐）

为了避免不必要的开发维护和学习成本，经过思考后，发现最佳的方式是所有的写法都不变，在配置文件中实现动态替换。

在`vue2`中使用

在uniapp中的vue2采用的是webpack编译，可以直接通过现有的插件来实现图片路径的动态替换。
在 vue.config.js文件中修改的配置即可。

module.exports = {
  chainWebpack: config => {

    config.module
      .rule('vue')
      .test([/.vue$/, /.nvue$/])
      .use('vue-loader')
      .tap((options) =>
        Object.assign({}, options, {
          // 配置小程序image标签的src 也进行资源路径转换
          transformAssetUrls: {
            image: 'src',
          },
        }),
      )
      .end();
      
    config.module
      .rule('images')
      .use('url-loader')
      .tap((args) => {
        return Object.assign({}, args, {
          // 配置转换规则，-1 表示任何大小的资源都不进行base64转换
          limit: -1,
          // 这里重要，publicPath 配置给url-loader 会不生效，必须配置到fallback里传递给file-loader
          fallback: {
            loader: 'file-loader',
            options: {
              publicPath(url, resourcePath, context) {
                return 'https://cdn.example.com' + path.relative(process.env.UNI_INPUT_DIR, resourcePath)
              },
              emitFile: false,
            },
          },
      })
      .end();
  }
};

在`vue3`中使用

在uniapp中的vue3采用的是vite编译，由于没有相应的插件，我自己实现了一个图片路径替换插件vite-plugin-replace-image-url来使用。

在vite.config.vue中直接使用即可。

import replaceImageUrl from 'vite-plugin-replace-image-url';
export default {
  plugins: [replaceImageUrl(
    {
      publicPath: 'https://www.xxx.com/',
      sourceDir: path.resolve(__dirname, './src/static'),
      include: ['**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp'],
      exclude: ['**/logo.png'],
      verbose: true,
    }
  )],
}

具体用法参考插件链接：vite-plugin-replace-image-url - npm (npmjs.com)

使用方法

这里的使用方式和正常的写法没有啥变化，需要注意的是想要地址能够成功替换，必须采用绝对路径。

<image src="@/static/images/logo.png"></image>

图片转换地址到这里就告一段落了，现在还存在一个问题。每次构建打包后图片不会自动删除，每次都手动删除，实在不方便，于是又有了下面的方案。

四、将构建后的图片自动删除

在`vue2`中使用

这里需要引入一个clean-webpack-plugin插件来实现自动删除。

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
configureWebpack: (config) => {
    // 生产环境，删除部分图片资源
    if (process.env.NODE_ENV === 'production') {
        config.plugins.push(
          new CleanWebpackPlugin({
            // 清除编译后的图片资源
            cleanAfterEveryBuildPatterns: [
                'static/images/**',
                '!static/images/tabbar*'
            ]
          })
        )
    }
}

更多用法，参考插件链接：clean-webpack-plugin - npm (npmjs.com)

在`vue3`中使用

在vite插件中找了一圈，没找到现成的插件，于是我参考clean-webpack-plugin实现了一个vite-plugin-clean-build插件。

使用方法如下：

import CleanBuild from 'vite-plugin-clean-build';
export default {
  plugins: [CleanBuild(
    {
      outputDir: 'dist',
      patterns: [
        'static/images/**',
        '!static/images/tabbar*'
      ]
    }
  )],
}