延迟加载js/优化加载时间

Question

我发现很难找到优化当前堆栈的方法。我当前的油门加载时间（常规 3g Chrome 开发工具）是 42-43 秒。

我尝试延迟加载 CSS 但似乎 main.js 文件 (2.9MB) 是最重的，不知何故我需要减少它。我怎样才能实现可以扩展的重组，并且不仅适用于以下代码而且适用于所有 angular 堆栈？

我希望我不必完全改造它。但是只要在上面构建一些东西来优化它我的代码结构如下。

/*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'])

Answer 1

您可以考虑缩小源代码。据我所知，browserify 不会这样做，所以据我所知，你最终得到了一个未优化的包。您可以通过这种方式稍微减少代码。

部分选项：

将来您可能还会考虑将代码拆分为更多包并在第一次需要时加载（例如，基于主要路线）。

希望对您有所帮助

延迟加载js/优化加载时间

Lazy load js/ optimize load time

javascript

optimization

lazy-loading

angularjs

gulp