优化资源加载 1 - 图片加载优化和代码压缩

vlambda
2020-06-12

优化资源加载 1 - 图片加载优化和代码压缩

CSS Sprites

CSS Sprites 技术是前端领域一种很常见的用于减少图片资源请求数的优化方式。

如果使用 webpack 3.x 版本，需要 CSS Sprites 的话，可以使用 webpack-spritesmith 或者 sprite-webpack-plugin。

以 webpack-spritesmith 为例，先安装依赖：

npm install webpack-spritesmith --save-dev

在 webpack 的配置中应用该插件：

module: { loaders: [ // ... 这里需要有处理图片的 loader，如 file-loader ]},resolve: { modules: [ 'node_modules',  'spritesmith-generated', // webpack-spritesmith 生成所需文件的目录 ],},plugins: [ new SpritesmithPlugin({ src: { cwd: path.resolve(__dirname, 'src/ico'), // 多个图片所在的目录 glob: '*.png' // 匹配图片的路径 }, target: { // 生成最终图片的路径 image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),       // 生成所需 SASS/LESS/Stylus mixins 代码，使用 Stylus 预处理器做例子 css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.styl'),  }, apiOptions: { cssImageRef: "~sprite.png" }, }),],

在需要的样式代码中引入 sprite.styl 后调用需要的 mixins 即可

@import '~sprite.styl'
.close-button sprite($close).open-button sprite($open)

图片压缩

在一般的项目中，图片资源会占前端资源的很大一部分，既然代码都进行压缩了，占大头的图片就更不用说了。

可以用 file-loader 来处理图片文件，在此基础上，再添加一个 image-webpack-loader 来压缩图片文件。配置如下：

module.exports = { // ... module: { rules: [ { test: /.*\.(gif|png|jpe?g|svg|webp)$/i, use: [ { loader: 'file-loader', options: {} }, { loader: 'image-webpack-loader', options: { mozjpeg: { // 压缩 jpeg 的配置 progressive: true, quality: 65 }, optipng: { // 使用 imagemin-optipng 压缩 png，enable: false 为关闭 enabled: false, }, pngquant: { // 使用 imagemin-pngquant 压缩 png quality: '65-90', speed: 4 }, gifsicle: { // 压缩 gif 的配置 interlaced: false, }, webp: { // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式 quality: 75 }, }, ], }, ], },}

image-webpack-loader 的压缩是使用 imagemin 提供的一系列图片压缩类库来处理的。

使用 DataURL

项目中会有一些很小的图片，因为某些缘故并不想使用 CSS Sprites 的方式来处理（譬如小图片不多，因此引入 CSS Sprites 感觉麻烦），可以在 webpack 中使用 url-loader 来处理这些很小的图片。

url-loader 和 file-loader 的功能类似，但是在处理文件的时候，可以通过配置指定一个大小，当文件小于这个配置值时，url-loader 会将其转换为一个 base64 编码的 DataURL，配置如下：

module.exports = { // ... module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192, // 单位是 Byte，当文件小于 8KB 时作为 DataURL 处理 }, }, ], }, ], },}

代码压缩

webpack 4.x 版本运行时，mode 为 production 即会启动压缩 JS 代码的插件，而对于 webpack 3.x，使用压缩 JS 代码插件的方式也已经介绍过了。在生产环境中，压缩 JS 代码基本是一个必不可少的步骤，这样可以大大减小 JavaScript 的体积。

除了 JS 代码之外，还需要 HTML 和 CSS 文件，这两种文件也都是可以压缩的，虽然不像 JS 的压缩那么彻底（替换掉长变量等），只能移除空格换行等无用字符，但也能在一定程度上减小文件大小。在 webpack 中的配置使用也不是特别麻烦，所以通常也会使用。

对于 HTML 文件， html-webpack-plugin 插件可以帮助我们生成需要的 HTML 并对其进行压缩：

module.exports = {  // ...  plugins: [  new HtmlWebpackPlugin({  filename: 'index.html', // 配置输出文件名和路径  template: 'assets/index.html', // 配置文件模板  minify: { // 压缩 HTML 的配置  minifyCSS: true, // 压缩 HTML 中出现的 CSS 代码  minifyJS: true // 压缩 HTML 中出现的 JS 代码  }  }),  ], }

使用 minify 字段配置就可以使用 HTML 压缩，这个插件是使用 html-minifier 来实现 HTML 代码压缩的，minify 下的配置项直接透传给 html-minifier。

对于 CSS 文件，用处理 CSS 文件的 css-loader，也提供了压缩 CSS 代码的功能：

module.exports = { module: { rules: [ // ... { test: /\.css/, include: [ path.resolve(__dirname, 'src'), ], use: [ 'style-loader', { loader: 'css-loader', options: { minimize: true, // 使用 css 的压缩功能 }, }, ], }, ], }}

在 css-loader 的选项中配置 minimize 字段为 true 来使用 CSS 压缩代码的功能。css-loader 是使用 cssnano 来压缩代码的，minimize 字段也可以配置为一个对象，来将相关配置传递给 cssnano。

vlambda博客
学习文章列表