vue 设置图片不转为base64或修改大小
vue cli3,4打包设置图片不转为base64或修改大小限制
·
解释:
主要是为了减少http
请求,转为base64
以后小图片可以跟js
同时被加载到浏览器,而不需要多次对服务器发出图片资源请求;其次,图片转成base64
后,文件体积变大了大约1/3左右。
在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64。
好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感。
坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显。
vue-cli 3 、vue-cli 4 版本:
修改文件:vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: 20000 }))
}
}
limit:图片的大小(20000等于20kb)(设置1基本上所有图片都不转base64,设置0貌似无效,)
更多推荐
已为社区贡献1条内容
所有评论(0)