我不确定如何组织我的js代码。
我们的前端是为不同的客户定制的。大多数基本代码在所有客户中都是通用的。但是，在某些情况下，每个客户都会覆盖某些功能。例如，如果我们有 2 个函数
函数 1 和函数 2。
客户 1 使用功能 1，而客户 2 使用函数 2。如何确保在为客户构建代码时，Function2 不会包含在捆绑包中？当我为客户 2 构建代码时，函数 1 不会包含在捆绑包中吗？
我的另一个选项，也是我试图避免的，是为每个客户提供一个单独的代码存储库。
在 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
}
}
];
库.js
exports.usedFunction = () => {
return 0;
};
exports.unusedFunction = () =>{
return 1;
};
主.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)()})();
远/无.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)()})();
^^^^^^^^^^^
摇树可能是一个顽固的过程，具体取决于您在应用程序中使用的库的开发方式。
如果您发现您使用的模块不能正确摇动死代码，您可以随时使用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函数来做到这一点。
随意删除对您来说不必要的东西，并保留有助于:)的部分。
我认为你需要的是 webpack 中的摇树。