我很难找出一种优化当前堆栈的方法。我目前在油门上的负载时间（常规3G Chrome Dev工具）为42-43。
我尝试懒惰加载CSS，但似乎Main.js文件（2.9MB）是最重的，我需要以某种方式将其切下。我如何实现重组哪个可以扩展，而不仅仅是以下代码，而是所有角堆栈的正确构成？
我希望我不必熟练地修改它。但是只需在顶部建立一些以优化它我的代码如下所示。
/* app.js */
require('angular');
require('angular-aria');
require('angular-animate');
require('angular-material');
require('angular-ui-router');
global.jQuery = require('jquery');
// global.$ = jQuery;
require('html5shiv');
require('bootstrap');
// require('angular-mocks');
// require('../node_modules/bootstrap/dist/js/bootstrap.js');
var AuthTokenFactory = require('./services/AuthTokenFactory'),
UserFactory = require('./services/UserFactory'),
AuthInterceptor = require('./services/AuthInterceptor'),
AppFactory = require('./services/AppFactory'),
DateFilter = require('./filters/DateFilter'),
OnlyNumeric = require('./directives/OnlyNumeric.directive'),
HomeController = require('./controllers/HomeController'),
BranchListingCtrl = require('./controllers/branchListingCtrl');
angular.module('bankApp', ['ui.router', 'ngMaterial'])
.run(['UserFactory', '$location', '$rootScope', function(UserFactory, $location, $rootScope) {
//State change function here
}])
.config(function($stateProvider, $urlRouterProvider, $mdThemingProvider, $httpProvider, $locationProvider) {
//States here
})
.factory('UserFactory', ['$http', '$q', 'AuthTokenFactory', 'API', '$httpParamSerializerJQLike', UserFactory])
.factory('AuthTokenFactory', ['$window', AuthTokenFactory])
.factory('AuthInterceptor', ['AuthTokenFactory', AuthInterceptor])
.factory('AppFactory', ['$http', 'API', '$httpParamSerializerJQLike','$timeout', '$rootScope', '$window', AppFactory])
.filter('dateFilter', DateFilter)
.directive('onlyNumeric', OnlyNumeric)
/* index.html */
<!DOCTYPE html>
<html lang="en" ng-app="bankApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>My App</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
<!--<link rel="stylesheet" href="css/angular-material.css">-->
<!--<link rel="stylesheet" href="css/style.css">-->
<!-- <base href="/" /> -->
<script>
function loadCss(filename) {
var l = document.createElement('link');
l.rel = 'stylesheet';
l.href = filename
var h = document.getElementsByTagName('head')[0];
h.parentNode.insertBefore(l, h);
}
function cb() {
loadCss('css/bootstrap.min.css');
loadCss('css/angular-material.css');
loadCss('css/style.css');
}
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
</head>
<body>
<div class="toast" ng-show="toast.show" ng-class="{'success': toast.type == 'success', 'error': toast.type == 'error'}" ng-cloak>
{{toast.message}}
</div>
<div>
<div ui-view></div>
</div>
<script src="js/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=random">
</script>
<!-- <script src="http://maps.google.com/maps/api/js"></script> -->
<!-- Google Analytics -->
<script>
//Analytics function here
</script>
<!-- End Google Analytics -->
</body>
</html>
/* Gulpfile.js */
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var connect = require('gulp-connect');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var cache = require('gulp-cache');
gulp.task('connect', function(){
connect.server({
// root: '',
port: 4000
})
})
gulp.task('browserify', function(){
return browserify('./app/app.js')
.bundle()
.pipe(source('main.js'))
//save it to public/js/ directory
.pipe(gulp.dest('./js/'))
})
gulp.task('sass', function(){
return sass('sass/style.scss')
.pipe(gulp.dest('./css'))
})
gulp.task('clearCache', function() {
// Still pass the files to clear cache for
gulp.src('./*.js')
.pipe(cache.clear())
// Or, just call this for everything
cache.clearAll();
})
gulp.task('watch', function(){
gulp.watch('app/**/*.js', ['browserify'])
gulp.watch('sass/style.scss', ['sass'])
// gulp.watch('index.html', [ 'build-html'])
})
gulp.task('default', ['connect', 'watch', 'clearCache'])
您可以考虑缩小源代码。据我所知，Browserify不会这样做，因此，从我看到的情况来看，您最终会出现一个不优化的捆绑包。您可以以这种方式减少代码。
一些选项：
- https://www.npmjs.com/package/gulp-minify
- https://www.npmjs.com/package/gulp-uglify
将来您还可以考虑以更多的捆绑包分解代码并在首先需要时加载（例如，基于主要路线）。
希望这有帮助