javascript - 当我用入口文件中的导入替换 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';

• 在这个例子中转移和资源之间的区别意味着什么？

标签： javascriptangularjswebpack