webpack sideEffects配置详解与实际应用经验分享

先看效果，再看代码

最近在项目里折腾了一番Webpack的sideEffects配置，发现这个东西虽然简单，但用起来还是有不少坑。今天就来聊聊我的使用经验，希望对大家有帮助。

核心代码就这几行

首先，我们来看看sideEffects的基本配置。在webpack.config.js中加上这么几行代码：

module.exports = {
  // 其他配置...
  optimization: {
    sideEffects: false,
  },
};

就这么简单，但效果却很显著。sideEffects配置的主要作用是告诉Webpack哪些文件是“纯模块”，也就是说这些文件不会修改全局变量或者DOM。这样做的好处是，Webpack可以更好地进行Tree Shaking，减少打包后的体积。

这个场景最好用

在实际开发中，我发现sideEffects最常用的一个场景就是处理第三方库。比如，你项目中引入了一些工具库，这些库大部分都是纯函数，不会修改全局状态。这时候就可以利用sideEffects优化一下：

module.exports = {
  // 其他配置...
  optimization: {
    sideEffects: [
      'node_modules/some-library/**/*.js',
      'node_modules/another-library/**/*.js',
    ],
  },
};

这里我列出了两个常用的第三方库，some-library和another-library。你可以根据实际情况调整这些路径。亲测有效，打包后的体积确实小了不少。

多种用法，总有一款适合你

除了上面提到的基础用法，sideEffects还有一些进阶玩法。比如，你可以更精细地控制某些文件的sideEffects属性：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
        sideEffects: false, // 这里直接设置为false
      },
    ],
  },
  optimization: {
    sideEffects: true, // 或者在这里统一设置
  },
};

在这个例子中，我通过loader配置直接给某个规则设置了sideEffects: false。这样做的好处是可以更灵活地控制每个模块的行为。当然，这也有点麻烦，需要你对项目的结构非常熟悉。

踩坑提醒：这三点一定注意

在使用sideEffects的过程中，我踩过不少坑，这里总结一下，希望能帮大家避坑。

• 不要盲目设置为false：有些库确实会有副作用，比如修改全局变量或DOM。如果你把这些库也设置为sideEffects: false，可能会导致一些意想不到的问题。建议在设置前先确认下库的文档。
• 测试要到位：每次修改sideEffects配置后，一定要进行全面的测试。有时候一个小改动可能会影响到整个应用的表现。我之前就因为一个小小的配置改动，搞崩了整个前端页面，折腾了半天才找出来问题。
• 注意兼容性：sideEffects虽然是个好东西，但并不是所有版本的Webpack都支持。如果你的项目还在用老版本的Webpack，可能需要先升级到最新版本。否则，可能会出现一些奇怪的错误。

高级技巧：动态配置sideEffects

对于一些复杂的项目，静态配置sideEffects可能不够灵活。这时候可以考虑使用动态配置。比如，你可以写一个脚本，根据项目的实际情况自动生成sideEffects配置：

const fs = require('fs');
const path = require('path');

const generateSideEffectsConfig = () => {
  const sideEffectsFiles = [];

  // 读取项目中的某些文件，判断是否为纯模块
  const files = fs.readdirSync(path.resolve(__dirname, 'src'));
  files.forEach(file => {
    if (file.endsWith('.js') && !file.includes('global')) {
      sideEffectsFiles.push(src/${file});
    }
  });

  return sideEffectsFiles;
};

module.exports = {
  // 其他配置...
  optimization: {
    sideEffects: generateSideEffectsConfig(),
  },
};

这个脚本会读取项目中的某些文件，判断它们是否为纯模块，并生成相应的sideEffects配置。这种方式虽然有点复杂，但对于大型项目来说非常有用。

总结一下，继续分享

以上就是我对sideEffects的一些使用经验。这个技术的拓展用法还有很多，后续我会继续分享这类博客。如果有更好的实现方式或者发现了新的坑点，欢迎在评论区交流。

这个技巧的拓展用法还有很多，后续会继续分享这类博客。希望对你有帮助！