Javascript Web包包大小与requirejs包大小

我正在尝试将基于requireJS的应用程序迁移到webpack

这个应用程序没有太多的依赖项-实际上它只需要一个promise polyfill-我已经知道如何使用缩小的一个来制作网页包

requireJS的包大小过去是43KB，使用webpack时是121KB

虽然121KB并不是很大，但它的大小有了显著的增加

通过运行

webpack--display reasons--display modules

我了解到，我的包中似乎包含一些节点模块依赖项。比我想象的要多

我看到的东西有

缓冲区

，

可读流

，

流http

，

流浏览器化

，

核心util是

，

缓冲垫片

这是预期的/网页包装代码的一部分吗

我可以做些什么来排除这些依赖项吗

这是我的webpack.config.js：

var webpack=require（'webpack'）；
module.exports={
条目：{
“mynexuz”：“/js/mynexuz api.js”，
“kws”：“/js/kws api.js”，
“main”：“/js/main.js”，
“任务”：“/js/quest.js”
},
输出：{
文件名：“./dist/[name]-bundle.js”，
},
插件：[
新建webpack.optimize.UglifyJsPlugin({
压缩：{
警告：错误
}
}),
新的webpack.DefinePlugin({
“process.env”：{
'NODE_ENV'：JSON.stringify（'production'），
}
})
],
节点：{
//流：错，
//过程：假，
//全局：错误
},
//启用sourcemaps以调试Web包的输出。
devtool：“源地图”，
决心：{
模块：['js'，'js/lib'，'node_modules']，
//添加“.ts”和“.tsx”作为可解析扩展。
扩展名：[“.webpack.js”、“.web.js”、“.ts”、“.tsx”、“.js”]
},
模块：{
装载机：[
//所有输出“.js”文件都将由“源地图加载器”重新处理任何源地图。
{
测试：/\.js$/,，
加载器：“源地图加载器”，
排除：/node\u模块/
},
//所有扩展名为“.ts”或“.tsx”的文件都将由“awesome typescript loader”处理。
{
测试：/\.tsx？$/,，
加载器：“很棒的类型脚本加载器”，
排除：/node\u模块/
}
]
},
};这并不适用于您正在使用的所有库，但如果可能，您可以通过仅导入需要使用的实际函数/组件来保存文件大小

下面是一个lodash的例子

import has from 'lodash/has';

上述方法将只导入
has
方法

但是，如果您执行以下任一操作：

import { has } from 'lodash';

或

然后，您将导入所有lodash库，这将增大您的文件大小

然而，对于其他库（即当前版本的moment.js），只导入所需库的一部分并不是那么简单

有其他几种方法可以解决这个问题（即调整你的网页设置），但我会从这个方法开始。
在深入研究这个问题后，我找到了捆绑包大的原因。在真实的requireJS风格中，我有：

define(['http', 'config'], function (Http, Config) { ... });

这个“http”应该是指我自己的库，但webpack将其解析为某个NPM模块，引入了前面提到的所有依赖项

我现在已将代码更改为：

define(['./http', 'config'], function (Http, Config) { ... });

捆绑包大小恢复到44KB左右。
这很有趣；我认为发布你的网页配置和一些关于源代码依赖性的线索会有所帮助。43KB是否包括RequireJS本身？这是没有RequireJS本身的
devtool:“源代码映射”
将放大你的文件大小，该文件只应用于开发构建。唯一的外部库是。我还在使用requireJS风格的导入…@Red温室你能指出你从哪里得到这些信息吗？我非常有兴趣了解更多这方面的信息，并且发现很难找到更多的资料来解释使用子模块导入和使用花括号导入之间的区别。@hurrtz它围绕着其他堆栈溢出答案浮动，但也在关于减少文件大小的博客文章中：
define(['./http', 'config'], function (Http, Config) { ... });