Javascript 如何在构建包时删除未使用的代码？

我不知道如何组织我的js代码。
我们的前端是根据不同的客户定制的。大多数基本代码在所有客户中都是通用的。但是，在某些情况下，每个客户的某些功能都会被覆盖。
例如，如果我们有两个函数Function1和Function2。
Customer1使用Function1，Customer2使用Function2。如何确保在为客户构建代码时，Function2不会包含在捆绑包中？当我为Customer2构建代码时，Function1不会包含在包中吗

---

另一个我想要避免的选择是为每个客户提供单独的代码回购。

我认为您需要的是在webpack中。

根据您在应用程序中使用的库的开发方式，树抖动可能是一个棘手的过程

如果您发现您使用的模块没有正确地摇晃死掉的代码，您可以始终使用

babel插件导入

插件。这个插件将只使用您导入的代码构建您的包，而不使用其他任何东西。下面是我的babel 7.x配置文件的一个示例。我用它来删除很多代码，这些代码并没有被网页从材料ui中删除

{
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/core",
        "libraryDirectory": "/",
        "camel2DashComponentName": false
      },
      "core"
    ],
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/icons",
        "libraryDirectory": "/",
        "camel2DashComponentName": false
      },
      "icons"
    ]
  ]
}

在某些库中使用此插件时，某些导入也可能会中断，您可能需要自行导入某些内容。我必须使用material ui的makeStyles函数来实现这一点

请随意删除您不需要的内容，并保留有帮助的部分：）。

在webpack配置中，将删除未使用的代码

webpack.config.js

module.exports = [
    {
        entry: "./main.js",
        output: {
            filename: "output.js"
        },
        optimization: {
            usedExports: true, // <- remove unused function
        }
    },
    {
        entry: "./main.js",
        output: {
            filename: "without.js"
        },
        optimization: {
            usedExports: false, // <- no remove unused function
        }
    }
];

main.js

// Not working
// const lib = require("./lib"); 
// const usedFunction = lib.usedFunction;

// Working
const usedFunction = require("./lib").usedFunction;

usedFunction()
```shell
$ webpack 

---

生成的输出文件：
dist/output.js

(()=>{var r={451:(r,t)=>{t.W=()=>0}},t={};(0,function e(o){var n=t[o];if(void 0!==n)return n.exports;var p=t[o]={exports:{}};return r[o](p,p.exports,e),p.exports}(451).W)()})();

dist/without.js

(()=>{var n={451:(n,r)=>{r.usedFunction=()=>0,r.unusedFunction=()=>1}},r={};(0,function t(u){var e=r[u];if(void 0!==e)return e.exports;var o=r[u]={exports:{}};return n[u](o,o.exports,t),o.exports}(451).usedFunction)()})();
                           ^^^^^^^^^^^

---

请不要留下仅链接的答案。@mistahenry正式指出：）抱歉，或者这次：）我认为，

模式：'development'

，

usedExports:true

不起作用

(()=>{var n={451:(n,r)=>{r.usedFunction=()=>0,r.unusedFunction=()=>1}},r={};(0,function t(u){var e=r[u];if(void 0!==e)return e.exports;var o=r[u]={exports:{}};return n[u](o,o.exports,t),o.exports}(451).usedFunction)()})();
                           ^^^^^^^^^^^