用require导入图片有什么缺点吗？

Question

用这种方式导入图标和写成 background 用 class 来切换有什么最佳实践吗？

`

        resourceType: {
            audio: {
                name: '音频',
                image: require('../../assets/audio.png'),
            },
            media: {
                name: '图片',
                image: require('../../assets/img.png'),
            },
            wk: {
                name: '微课',
                image: require('../../assets/wk.png'),
            },
            vedio: {
                name: '视频',
                image: require('../../assets/wk.png'),
            },
            ppt: {
                name: 'ppt',
                image: require('../../assets/ppt.png'),
            },
            word: {
                name: 'word',
                image: require('../../assets/word.png'),
            },
            pdf: {
                name: 'pdf',
                image: require('../../assets/pdf.png'),
            },
            txt: {
                name: 'txt',
                image: require('../../assets/txt.png'),
            },
            image: {
                name: '图片',
                image: require('../../assets/img.png'),
            },
            excel: {
                name: 'excel',
                image: require('../../assets/excel.png'),
            },
            default: {
                name: 'unknown',
                image: require('../../assets/excel.png'),
            },
        },

`

Answer 1

如果图标都是位图的话你这样写基本上就算最佳实践了（base64可以靠打包工具自动处理，webp在iphone上不兼容慎用），雪碧图性能是会更好一点但用起来很麻烦
如果是矢量图的话可以用iconfont

Answer 2

这样会转成base64的 可以省去一次请求。图片小的话 也可以换成雪碧图，或者把图片转成理小容量的webp

Answer 3

你们都讲的好深奥，我只知道加载的时候有点慢，而且v-for时不是同时刷出来的