优化前端资源加载 1 - 图片加载优化和代码压缩
前面我们已经提及如何使用 webpack 来满足不同环境的构建需求,其中在生产环境构建时会做额外的一些工作,例如代码压缩等
我们总是希望浏览器在加载页面时用的时间越短越好,所以构建出来的文件应该越少越小越好,一来减少浏览器需要发起请求的数量,二来减少下载静态资源的时间。
其实 webpack 把多个代码文件打包成几个必需的静态资源,已经很大程度减少了静态资源请求数量了,接下来我们来介绍下如何使用 webpack 实现更多的前端资源加载的优化需求。
CSS Sprites
CSS Sprites技术是前端领域一种很常见的用于减少图片资源请求数的优化方式,这里不做详细的介绍。
在了解 webpack 配置之前,需要明白 CSS Sprites 的原理。
如果你使用的 webpack 3.x 版本,需要 CSS Sprites 的话,可以使用 webpack-spritesmith或者 sprite-webpack-plugin。
我们以 webpack-spritesmith 为例,先安装依赖:
1 | npm install webpack-spritesmith --save-dev |
在 webpack 的配置中应用该插件:
1 | module: { |
在你需要的样式代码中引入sprite.styl
后调用需要的 mixins
即可:
1 | @import '~sprite.styl' |
更多的 webpack-spritesmith 配置可以参考:Config of webpack-spritesmith。
遗憾的是,上面提到的这两个 plugin 还没更新到支持 webpack 4.x 版本,如果你使用的是 webpack 4.x,你需要配合使用 postcss和 postcss-sprites,才能实现 CSS Sprites 的相关构建。
图片压缩
我们之前提及使用 file-loader 来处理图片文件,在此基础上,我们再添加一个 image-webpack-loader 来压缩图片文件。简单的配置如下:
1 | module.exports = { |
image-webpack-loader 的压缩是使用 imagemin 提供的一系列图片压缩类库来处理的,如果需要进一步了解详细的配置,可以查看对应类库的官方文档 usage of image-webpack-loader。
使用 DataURL
有的时候我们的项目中会有一些很小的图片,因为某些缘故并不想使用 CSS Sprites 的方式来处理(譬如小图片不多,因此引入 CSS Sprites 感觉麻烦),那么我们可以在 webpack 中使用 url-loader 来处理这些很小的图片。…
url-loader 和file-loader 的功能类似,但是在处理文件的时候,可以通过配置指定一个大小,当文件小于这个配置值时,url-loader 会将其转换为一个 base64 编码的 DataURL,配置如下:
1 | module.exports = { |
更多关于 url-loader 的配置可以参考官方文档 url-loader,一般情况仅使用limit
即可。
代码压缩
webpack 4.x 版本运行时,mode 为 production 即会启动压缩 JS 代码的插件,而对于 webpack 3.x,使用压缩 JS 代码插件的方式也已经介绍过了。在生产环境中,压缩 JS 代码基本是一个必不可少的步骤,这样可以大大减小 JavaScript 的体积,相关内容这里不再赘述。
除了 JS 代码之外,我们一般还需要 HTML 和 CSS 文件,这两种文件也都是可以压缩的,虽然不像 JS 的压缩那么彻底(替换掉长变量等),只能移除空格换行等无用字符,但也能在一定程度上减小文件大小。在 webpack 中的配置使用也不是特别麻烦,所以我们通常也会使用。
对于 HTML 文件,之前介绍的 html-webpack-plugin
插件可以帮助我们生成需要的 HTML 并对其进行压缩:…
1 | module.exports = { |
如上,使用 minify 字段配置就可以使用 HTML 压缩,这个插件是使用 html-minifier 来实现 HTML 代码压缩的,minify 下的配置项直接透传给 html-minifier,配置项参考 html-minifier 文档即可。
对于 CSS 文件,我们之前介绍过用来处理 CSS 文件的 css-loader,也提供了压缩 CSS 代码的功能:…
1 | module.exports = { |
在 css-loader 的选项中配置 minimize 字段为 true 来使用 CSS 压缩代码的功能。css-loader 是使用 cssnano 来压缩代码的,minimize 字段也可以配置为一个对象,来将相关配置传递给 cssnano。
小结
由于优化前端资源加载这个主题相关的内容比较多,所以拆分成多个小节。本小节先介绍了比较基础的部分:CSS Sprites、图片压缩、使用 DataURL,以及基本的代码压缩.