当我用入口文件中的导入替换html中的脚本标签时，为什么我的webpack包如此之大？

Question

我正在将Angularjs应用重构为React应用。 Angular应用在index.html中有一堆脚本标签，例如：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/lodash/dist/lodash.min.js"></script>
<script src="bower_components/Chart.js/Chart.min.js"></script>
<script src="bower_components/pdfmake/build/pdfmake.min.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
<script src='bower_components/angular-loading-bar/build/loading-bar.min.js'></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.min.js"></script>
<script src="bower_components/sweetalert/dist/sweetalert-dev.js"></script>
<script src="bower_components/store/dist/store2.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
(...)

在将其移植到webpack时，我删除了这些脚本标记，并用条目文件index.js中的导入替换了它们，如下所示：

// dependencies from angular legacy
import '../node_modules/jquery/dist/jquery.min.js';
import '../node_modules/lodash/lodash.min.js';
import '../node_modules/Chart.js/dist/Chart.min.js';
import '../node_modules/pdfmake/build/pdfmake.min.js';
import '../node_modules/pdfmake/build/vfs_fonts.js';
import '../node_modules/angular/angular.min.js';
import '../node_modules/angular-animate/angular-animate.min.js';
import '../node_modules/angular-aria/angular-aria.min.js';
import '../node_modules/angular-cookies/angular-cookies.min.js';
import '../node_modules/angular-messages/angular-messages.min.js';
import '../node_modules/angular-resource/angular-resource.min.js';
import '../node_modules/angular-route/angular-route.min.js';
import '../node_modules/angular-sanitize/angular-sanitize.min.js';
import '../node_modules/angular-strap/dist/angular-strap.min.js';
import '../node_modules/angular-strap/dist/angular-strap.tpl.min.js';
import '../node_modules/angular-touch/angular-touch.min.js';
import '../node_modules/angular-chart.js/dist/angular-chart.min.js';
import '../node_modules/angular-loading-bar/build/loading-bar.min.js';
import '../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js';
import '../node_modules/sweetalert/dist/sweetalert-dev.js';
import '../node_modules/store2/dist/store2.min.js';

import '../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js';
import '../node_modules/angular-strap/dist/angular-strap.min.js';
import '../node_modules/angular-strap/dist/angular-strap.tpl.min.js';
import '../node_modules/angular-ui-router/release/angular-ui-router.min.js';
import '../node_modules/ui-select/dist/select.min.js';
(...)

我注意到，这个webpack包非常大，只有26mb。加载新页面时，Chrome开发工具告诉我“已传输”为7.7mb，但“资源”为27mb。

此外，现在有了这些导入，我的node_modules中有多个Angular版本。

我使用了webpack-bundle-analyzer，并得到了以下信息：

那么几个问题：

• 在这张照片中，我怎么有angular.js和angular.min.js？在我的导入文件中，我只有import '../node_modules/angular/angular.min.js';

• 在此示例中，转移的资源与资源之间的区别意味着什么？