Question

我有一个TypeScript项目，它成功地使用了Webpack来生成ES6，这个项目通过babel-minify运行，并对其进行树抖并产生一个明显更小的bundle输出文件。

此文件似乎包含我自己程序中的所有逻辑以及我正在使用的每个导入库的逻辑（例如rxjs，lodash等）

但是，我正在查看生成的文件，看起来在顶部我们有一些webpack逻辑，然后是原始导入到实现它的函数的路径的映射，而且，实际上，很多都是这样，各个部分指向依赖关系及其路径字符串。

现在，鉴于所有内容都是自包含在这个webpack包中（没有其他块），包含所有源文件名似乎不必要地占用了大量空间。

例如，我在这里查看lodash的isBoolean脚本的一个部分：

"./node_modules/lodash/isBoolean.js": function(e, t, o) {
    var r = o("./node_modules/lodash/_baseGetTag.js"),
        s = o("./node_modules/lodash/isObjectLike.js");
    e.exports = function(e) {
        return !0 === e || !1 === e || s(e) && "[object Boolean]" == r(e)
    }
},

现在，似乎有很多字符被用来描述源文件。由于此时源文件上没有实际的依赖关系，为什么不能在每个密钥都用更短的字符串标识符替换，如下例所示：

"a": function(e, t, o) {
    var r = o("b"),
        s = o("c");
    e.exports = function(e) {
        return !0 === e || !1 === e || s(e) && "[object Boolean]" == r(e)
    }
},

其中“a”，“b”和“c”都代表整个包中出现原始字符串值的每个地方。这不应该影响所有字符串，而只影响导入文件路径字符串。

在我看来，似乎有人在Webpack compress path names提出了类似的问题并没有得到满意的答案。

我可以使用哪些选项或插件可以破坏模块路径名吗？

Answer 1

在阅读了Webpack的源代码并弄清楚它是如何实际组装整个事物之后想出来的。

我的配置中有NamedModulesPlugin（可能是来自其中一个各种快速入门的工件），此插件将所有模块路径插入到输出中。

从配置中注释掉（或者只是删除它）将其从输出中完全删除（不需要修改）。

缩小webpack中模块的导入路径

1 个答案: