浏览角度时文件大小很大答案

【问题标题】：huge files size when browserifying angular浏览角度时文件大小很大
【发布时间】：2014-08-28 22:21:50
【问题描述】：

我只是在尝试 gulp + angular + browserify 应用程序并获得了一个巨大的浏览器化文件，大约 2M。虽然它只需要角度和示例控制器。

// setup gulp task
gulp.task('browserify', function() {
  gulp.src([util.format('%s/app/main.js', JS_BASE_DIR)])
  .pipe(browserify({
    insertGlobals: true,
    debug: true
  }))
  // Bundle to a single file
  .pipe(concat('bundle.js'))
  // Output it to our dist folder
  .pipe(gulp.dest(util.format('%s/js/', BUILD_BASE_DIR)));
}); 


//in the main.js
(function() {
  'use strict';

  var angular = require('angular');

  var indexCtrl = require('./controllers/indexCtrl');

  var app = angular.module('wohu.app', []);

  app.controller('ctrl', indexCtrl);
})();

angular 是通过

安装的

npm install angular

bundle.js 没有缩小，但不应该那么大。想知道问题出在哪里。

【问题讨论】：

我不熟悉browserify，但我去阅读了about page for the browserify tag here on stack overflow。根据它正在做的事情，似乎会出现一些膨胀......它向文件中添加的不仅仅是角度和您的示例控制器。膨胀甚至被列为使用 browserify 的缺点之一。
似乎 browserify 生成了一个巨大的源映射，例如 "//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy95dWp1bi9kZXZlbG9wZXIvd29vaHUvbm9kZV..." 文件大小加倍
答案可能有点晚，但可能对其他人有用。在 Firefox 中测试我的应用程序时，我发现它不会像 Chrome 那样默认缓存文件。我查看了网络选项卡，对我生成的 browserify 包的大小感到不快，这是 6mb。我开始提取捆绑包中需要的其他模块，但不会有太大的不同。最后经过一番折腾，我发现它是 'debug: true' 属性，它产生了源映射。从生产版本中删除它，你会没事的。谢谢，火狐。

标签： node.js angularjs browserify

【解决方案1】：

Browserify 将在文件底部包含一个源映射，这可以使它看起来很大。您可以将其剥离（并且您应该）进行生产。您可以为此使用 exorcist (https://www.npmjs.com/package/exorcist)，它将源映射为您拉到一个外部文件中，并且可以连接到您的构建过程（我使用 Grunt，但也适用于 Gulp）。

【讨论】：