webpack打包了未引用图片的问题

背景

我司小程序使用Taro框架开发的，最近也是遇到了包体积过大导致无法预览的问题。其中一个优化点就是优化图片资源的大小，然后发现src下有一些未引用的图片也打包进了dist目录，现象就是图片资源目录下的所有图片都被打包了。

思考

• 首先修改打包配置里面的copy，不使用copy-webpack-plugin去拷贝文件。

• 修改关于图片的一些打包配置，例如：postcss、imageUrlLoaderOption。

• 搜索页面中引入资源目录所有文件的代码

• 以上方法都没有作用，排除了打包配置的可能性之后，最终通过一个一个页面打包然后查看是哪个页面复现了这个问题。

• 真相慢慢浮出水面，最后锁定了某个页面文件，定位到使用require的地方，最后发现了类似这样的代码。

const arr = [
    {
        icon: 'a.png',
        name: 'b'
    },
    {
        icon: 'c.png',
        name: 'd'
    }
]

// tsx
{
    arr.map(item => {
        <image src={require('@/assets/images/' + item.icon)} />
    })
}

这里的图片路径是使用字符串拼接的，猜测是这里出现的问题，果不其然，把上面的代码改成下面这种方式实现就解决了。

const arr = [
    {
        icon: require('@/assets/images/a.png'),
        name: 'b'
    },
    {
        icon: require('@/assets/images/c.png'),
        name: 'd'
    }
]

// tsx
{
    arr.map(item => {
        <image src={item.icon} />
    })
}

• 最后也是写了一个简单的Demo，证实了以上的说法。Demo

总结

使用webpack打包时，通过require加载图片时使用字符串拼接路径的方式会导致同目录下所有图片被打包。关于为什么会出现这样的问题，跟webpack内部实现有关，具体原因有待考察。

本文已同步到个人博客