从 webpack book 的 loading assets 一章中延申出来。
改善前端项目体验中,很重要的点就是静态资源的优化。它是由于浏览器客户端在同一时间针对同一 域名 的请求有一定资源限制。如果资源过多、过大就会使得页面卡顿。
静态资源中,又以图片最为典型。那么我们在开发中该如何处理图片呢?
webpack 是前端较为常用的手脚架工具,本文以它为例。
主要分为 开发 、 打包 、 优化 三个方面来介绍
开发
webpack 可以用使用 将静态图片转化为 base64 编码的字符串,并内联在对应的脚本中。大幅度地较少了页面的请求数,所以在开发阶段可以无限制地使用。具体方法
// npm install url-loader --save-dev
rules: [{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
},
}]
以 demo-example 为例,gakki.jpg 被转化为了 base 64 编码的图片。在开发阶段,没什么问题,但是如果在实际环境中,会发现一个很大的问题,将图片越大转化为base 64 编码的字符串就越长,将会导致整个 js 脚本的大小飙升。
打包
为了减小脚本的大小,我们需要告诉 webpack 什么情况下采用 url-loader 去内联图片,什么情况下采用其他的 loader。所以首先需要对 url-loader 进行配置
rules: [{
test: /\.(png|jpg)$/,
use: {