个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 05:27:25 25 4
gpt4 key购买 nike

我发现很难找到优化当前堆栈的方法。我当前的 throttle 加载时间(常规 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'])

最佳答案

您可以考虑缩小源代码。据我所知，browserify 不会执行此操作，因此从我看来，您最终会得到一个未优化的 bundle 。您可以通过这种方式稍微减少代码。

一些选项:

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

希望这有帮助

关于javascript - 延迟加载js/优化加载时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41095401/

25 4 0
文章推荐： javascript - angular2使用http读取json文件
文章推荐： javascript - Meteor - 网站在生产环境中无法运行
文章推荐： javascript - 如何在angularjs中包含html
文章推荐： javascript - 使所需的依赖项可以从包外部访问
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com