文章/答案/技术大牛

发布

社区首页 >问答首页 >延迟加载js/优化加载时间

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

Stack Overflow用户

提问于 2016-12-12 06:42:13

回答 1查看 216关注 0票数 0

我发现很难找到优化当前堆栈的方法。我目前在油门上的负载时间(常规3g Chrome工具)是42-43s。

我尝试过延迟加载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'])

gulp

lazy-loading

javascript

angularjs

optimization

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-12 09:05:04

您可能会考虑缩小源代码。据我所知，browserify并没有做到这一点，因此，从我所看到的情况来看，您最终得到了一个未优化的包。您可以以这种方式减少代码。

一些备选方案：

将来，您还可以考虑将代码拆分到更多的包中，并在第一次需要时加载(例如，基于主要路由)。

希望这能有所帮助

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41095401

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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