vue cli3 配置上线 本地图标转换base64 显示

chainWebpack: config => {
    config.module
    .rule('images')
      .use('url-loader')
        .loader('url-loader')
        .tap(options => Object.assign(options, { limit: 20000 })); // 配置线上图片转base64
        }

在使用 Vue.js 框架开发项目时，vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64。

好处：带来了更快的渲染，不会因为页面切换时还有加载图片的延迟感。

坏处：打包后的CSS，JS文件非常大，特别是图片数量多的情况下，这个问题尤为明显。

limit 是配置可转换图片大小 。不配置默认是10K。 需要知道。转base64 只是为了减少http图片请求，把图片转成base64存在本地js里。 如果app 有做了H5缓存，就无需转。但H5下加载还是需要。来减少http 请求图片资源。