工程化作业小结 - 体积优化篇

主要是归纳我欠缺的优化知识点，查漏补缺

TerserJS

一个用于压缩混淆JS代码的库，相比于uglify 对ES6有更好的支持。而由于JS压缩效率不理想，因此出现了由RUST重写的库swc，与terser拥有一样的 API

我们可以通过什么策略对 JavaScript 代码进行压缩

去除空格换行注释
压缩变量名函数名属性名
合并变量声明，简化逻辑布尔值
预计算编译，如常量和值，函数输出简化

Terser options

https://www.webpackjs.com/configuration/optimization/#optimizationminimize

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {//...
  optimization: {
    minimize: false,
    minimizer:[
      new TerserPlugin({
        parallel:true,
        terserOptions:{
          ecma: undefined,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          // Deprecated
          output: null,
          format: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        }
      })
    ]
  },
  };

什么是垫片？Corejs？

包含了所有ES6+的polyfill，用于兼容浏览器不支持的API，并且集成在了主流的包中如@bable/preset-env

browserslist 与垫片体积

像babel/preset-env 背后的corejs垫片，会受browserlist字段通过数据查询出来的支持率决定最终打包大小，新的浏览器所需的垫片则更少，打包体积更小
browserslist会根据caniuse-lite 这个库查询
查询覆盖率：https://browsersl.ist/

Tree Shaking 的原理是什么

不同于Require动态引入，基于 ES module的静态引入是可以被分析的，通过AST将用不到的代码进行移除，减小打包体积

有哪几种图片文件格式，其体积如何

相同质量图片体积：jpeg 》 png 》webp 》 avif（但支持率不高）

当你们网站中使用 avif 优化图片时，如果浏览器不支持 avif 如何处理

使用picture标签，可以降级处理

<picture>
  <source srcset="shanyue-hello.avif" type="image/avif">
  <source srcset="shanyue-hello.webp" type="image/webp">
  <img src="shanyue-hello.jpeg">
</picture>

在前端项目中，如何自动化处理图片

编译时，webpack中，借助 imagemin-webpack-plugin 、 imagemin-webp-webpack-plugin 去处理，借助url-loader 优化小图片为base64等

仅使用 canvas 优化图片，有哪些局限

仅能对图片的宽高做裁剪，且当指定格式为jpeg或者webp的情况下，使用toDataURL第二个参数对图片质量进行压缩

编译时与运行时优化图片的区别在哪里

这里的运行时优化主要指借助图片处理服务器，即OSS存储服务

无域名图片支持，域外图片不受编译控制
无宽高优化，原图1000，浏览器仅渲染100
无响应式图片

什么是 DataURL

将小图片转为DataURL，可以减少HTTP请求。DataURL由四个部分组成，前缀、MIME类型、标记、数据，它不仅是图片，也可以代表其他类型，只不过图片音频等二进制数据则必须由base64表示

小图片优化策略是什么

转为DataURL，减少图片内联，即减少HTTP请求达到优化的效果

在Webpack中处理小图片:

{
 module: {
    rules: [
      {
        test: /\.(bmp|jpe?g|png|gif)/,
        type: 'asset',
        parser: {
          // 对小于 4kb 的图片进行 DataURL 处理
          dataUrlCondition: {
            maxSize: 4 * 1024
          }
        }
      }
    ]
  },
};

对于svg则需要借助另外一个包，不然直接压缩会导致原本的体积增大，因为svg不同于二进制图片，属于文本图片，文本不需要base64处理

const path = require('path');
const svgToMiniDataURI = require('mini-svg-data-uri');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.svg/,
        type: 'asset/inline',
        generator: {
          dataUrl: content => {
            content = content.toString();
            return svgToMiniDataURI(content);
          }
        }
      }
    ]
  },
};

在之前的基础上，增加svgo对其进行更进一步的压缩

const path = require('path');
const svgToMiniDataURI = require('mini-svg-data-uri');
const { optimize } = require('svgo');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.svg/,
        type: 'asset/inline',
        generator: {
          dataUrl: content => {
            content = content.toString();
            // svgo 的核心 API，进行 svg 压缩
            const result = optimize(content);
            return svgToMiniDataURI(result.data);
          }
        }
      }
    ]
  },
};