【发布时间】：2016-12-12 17:05:04
【问题描述】：
我发现很难找到优化当前堆栈的方法。 我当前的油门加载时间（常规 3g Chrome 开发工具）是 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)
/* 索引.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'])
【问题讨论】：
标签： javascript angularjs optimization gulp lazy-loading