通过 tree shaking 移除无用代码

tree shaking 依赖于ES Module 的静态语法分析，在项目编译时移除无用的代码以减少文件体积。

在文件中，我们可能定义了变量但是暂时又没有用到，这样会造成空间的浪费。在 mode 为 production 时，会默认做一些配置，将无用的代码删除。为了看到没有做处理时编译后的文件效果，在 webpack 中做如下配置。

module.exports = {
  // 其他配置省略
  mode: 'development',
  optimization: {
    minimize: false,
    usedExports: false,
  },
};

在这种配置情况下，当存在没有用到的变量时，还是照原样编译到了 js 文件中。

想要移除掉 js 文件中的无用代码，开启 minimize 通过 usedExports 配置

module.exports = {
  // 其他配置省略
  mode: 'development',
  optimization: {
    minimize: true,
    usedExports: true,
  },
};

这样编译后就将没有用到的变量 username 和 foo 函数都移除掉了

这时候仍存在一个问题，如果通过模块化引入另一个js文件，即使没有被使用，useExports 也不会进行 tree shaking。

// index.js
import './format.js';

// format.js
export function timeFormat() {
  return '2022-01-01';
}

比如上面这段代码，通过 import 语句引入 format.js，但 format.js 导出的函数没有被使用。

此时仍然对于 import 语句进行了编译，我们希望在引入的文件中也进行 tree shaking，删除无用的代码，这个时候在 package.json 中配置 sideEffects 属性来处理。

// package.json 其他配置省略
{
    "sideEffects": false
}

sideEffects 用于告知 webapck 编译器哪些模块有副作用