Webpack sideEffects 不会删除未使用的功能答案

【问题标题】：Webpack sideEffects wont remove unused functionWebpack sideEffects 不会删除未使用的功能
【发布时间】：2021-07-07 20:59:04
【问题描述】：

在 babel-loader 中，我将副作用声明为 false，这意味着我应该从包中删除任何未使用的函数。但就我而言，logFour 函数仍然存在。

util.js

export function logThree() {
  console.log(3);
}
export function logFour() {
  console.log(4);
}

logThree();

logFour();

index.js

 import { logThree } from "./util";
logThree();

bundle.js

(() => {
  "use strict";
  function o() {
    console.log(3);
  }
  o(), console.log(4), o();
})();

网络包

module.exports = {
  mode: "production",
  entry: ["./src/index"],
  devtool: "source-map",
  output: {
    path: path.resolve("dist/"),
    publicPath: "/public/assets/",
    filename: "main.js",
  },
  optimization: {
    usedExports: true,
  },
  devServer: {
    contentBase: "./src",
  },
  resolve: {
    extensions: [".js"],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
        sideEffects: false,
      },
    ],
  },
};

【问题讨论】：

那是因为当你导入 utils 时会调用函数

标签： javascript webpack bundler side-effects

【解决方案1】：

首先，没有这样的选项sideEffects: falseinside webpack 配置。你应该把它放在 package.json 中。

其次，基于你可能复制粘贴的bundle.js，因为它没有被最小化，我怀疑你没有使用这个标志--mode production 运行 webpack。所以没有删除。

【讨论】：