Vue进阶（五十）： webpack 编译打包过程图片没有转成 base64 原因分析 |
您所在的位置：网站首页 › htmljson › Vue进阶（五十）： webpack 编译打包过程图片没有转成 base64 原因分析 |
|
Vue进阶（五十）： webpack 编译打包过程图片没有转成 base64 原因分析
原创
NoSilverBullet 2023-04-09 09:59:22 博主文章分类：Vue2 ©著作权 文章标签 文件大小 java 配置文件 文章分类 Vue.js 前端开发 指尖人生 ©著作权归作者所有：来自51CTO博客作者NoSilverBullet的原创作品，请联系作者获取转载授权，否则将追究法律责任首先解释下base64的目的，其主要是为了减少http请求，转为base64以后小图片可以跟js同时被加载到浏览器，而不需要多次对服务器发出图片资源请求；其次，图片转成base64后，文件体积变大了大约1/3左右。 文件的base64编码存储到了js文件中。 vue-webpack模板的默认设置限制了转码的文件大小为10000B以下。 静态文件目录中的所有文件不会被转码，也就是/static下的所有文件都不会被转码。 如果所有图片均转码为base64，那么很容易造成存储base64的js文件过大，一方面会造成资源加载时间过长的白屏问题，另一方面也会给js解释器带来非常大的负担，这样反而起不到优化的作用，而且会非常影响体验。 如果非要让所有图片转为base64，可以修改webpack中的url-loader配置。webpack.base.config.js配置文件信息如下： { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } 赞 收藏 评论 分享 举报上一篇：Vue进阶（四十九）：在Webapp上使用input:file, 指定capture属性调用默认相机，摄像，录音功能 下一篇：Vue进阶（五十一）： vue-cli 脚手架 webpack.base.conf.js 配置文件讲解 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |