Question

我不确定如何组织我的js代码。
我们的前端是为不同的客户量身定制的。基本代码的大多数对所有客户都是通用的。但是，在某些情况下，每个客户都无法使用某些功能。
例如，如果我们有两个函数Function1和Function2。
客户1使用功能1，而客户2使用功能2。如何为客户构建代码时，Function2将不包含在捆绑包中？而当我为Customer2构建代码时，Function1将不会包含在捆绑包中吗？

我要避免的另一种选择是为每个客户提供单独的代码存储库。

Answer 1

我认为您需要的是webpack中的Tree-Shaking。

Answer 2

摇树可能是一个顽固的过程，具体取决于您在应用程序中使用的库的开发方式。

如果您发现您使用的模块没有正确地抖动死代码，您可以随时使用 babel-plugin-import 插件。这个插件将只用你导入的代码构建你的包，没有其他东西。这是我的 babel 7.x 配置文件的示例。我用它从 material-ui 中删除了很多没有被 webpack 摇树的代码。

{
  "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 函数来做到这一点。

随意删除不需要的东西并保留有帮助的部分:)

Answer 3

在 webpack 配置中，optimization/usedExports: true 将删除未使用的代码。

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
        }
    }
];

lib.js

exports.usedFunction = () => {
    return 0;
};

exports.unusedFunction = () =>{
    return 1;
};

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)()})();
                           ^^^^^^^^^^^

构建捆绑包时如何删除未使用的代码？

3 个答案: