我也遇到了这个问题。因为当所有供应商库在同一个文件中时,它是一个巨大的文件。所以浏览器总是卡在下载超过10MB的文件上。文件缩小也不是解决方案,因为编译需要更长的时间,对开发没有帮助。
我将
vendor.js
和
app.js
分别放在不同的节点模块和应用程序脚本中。就像这样。
示例
vendor.js
(src/app/vendor.js)
require('angular');
require('angular-cookies');
require('angular-ui-router');
require('angular-aria');
require('angular-animate');
....
示例 app.js(src/app/app.js)
require('./modules/about/about.routing.js');
require('./modules/home/home.routing.js');
require('./shared/services/order.js');
require('./shared/services/product.js');
require('./shared/directives/dropzone.js');
require('./shared/directives/tab-change.js');
angular
.module('myApp', [
'ui.router',
'ngMaterial',
'cloudDecor.routing.about',
'cloudDecor.controller.about',
'cloudDecor.routing.home',
'cloudDecor.controller.home',
'cloudDecor.service.order',
'cloudDecor.directive.dropzone',
'cloudDecor.directive.tab-change'
]);
gulpfile.js
var gulp = require('gulp'),
browserify = require('browserify'),
uglify = require('gulp-uglify'),
buffer = require('vinyl-buffer');
gulp.task('app_js', function() {
browserify({
entries: ['./src/app/app.js'],
debug: true
})
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(gulp.dest('./build/'));
});
gulp.task('vendor_js', function() {
browserify({
entries: ['./src/app/vendor.js']
})
.bundle()
.pipe(source('vendor.min.js'))
.pipe(buffer())
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest('./build/'));
});
gulp.task('default', ['app_js', 'vendor_js']);
请确保在使用
index.html
中的
main.js
之前先引入
vendor.js
。
<html>
<body>
<script type="text/javascript" src="vendor.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
devDependencies
的原因。 - torvin