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 请求图片资源。

vue cli3 配置上线本地图标转换base64 显示相关推荐

vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
vue/cli3 配置vux
安装各插件试过安装"必须安装"的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install ...
Vue cli3配置生产环境，开发环境，和测试环境
目录 1.先在package.json文件中添加: 2.在项目目录下建立 .env文件和.env.test文件 3.配置api变量 3.1.配置axios的baseURL路径 3. ...
vue 下配置标题栏 title 图标及文字的具体步骤
1 . 将图片.ico 文件放在项目根目录下这里写图片描述 2 . 在 index.html 页面上配置图标及文字在项目的index.html 中: <head> <titl ...
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
一.问题描述 Vue CLI3打包上线后的代码使用IE11打开后是空白的,控制台报错: SCRIPT1003: 缺少 ':' app.js (304501,83045) 其他浏览器打开没问题,问题定位 ...
JAVA 图片地址路径转换 Base64 工具类
工具类代码: import sun.misc.BASE64Encoder; import java.io.ByteArrayOutputStream; import java.io.FileInput ...
Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
Vue CLI3 基本使用配置；
Vue CLI3 开始安装: npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目: vue create my-project ...

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

vue cli3 配置上线本地图标转换base64 显示相关推荐

最新文章

热门文章

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

vue cli3 配置上线 本地图标转换base64 显示相关推荐

最新文章

热门文章

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

vue cli3 配置上线本地图标转换base64 显示相关推荐