Özgür Adem Işıklı Özgür Adem Işıklı Software Developer Resume Contact

Software Developer

AngularJS Cache Problemi Ve Çözüm Önerisi

AngularJS kullanarak çok güçlü web uygulamaları geliştirmeniz mümkün. Ancak html ya da javascript yüklemeleri genellikle tarayıcılar tarafından ön bellekte tutularak, uygulamanızın performansının arttırılması sağlanmaktadır.

Fakat uygulamalar sabit değildir ve sürekli geliştirilir. Siz, bir dosyanın yapısını değiştirdiğinizde, ilgili dosya eğer kullanıcının tarayıcısda ön bellekte tutuluyorsa, kullanıcı bu son değişikliği alamayacaktır. Bu tür durumları çözmek için ilk yapılan, cache özelliğini tamamen ortadan kaldırmaktadır.


<html ng-app="MyApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    </head>
    <body ng-controller="MyController">
        <ng-include src="'/template.html?v=' + version"></ng-include>
        <script type="text/javascript">
            angular.module('MyApp', []).controller('MyController', function ($scope) {
                $scope.version = new Date().getTime();
            });
        </script>
    </body>
</html>

Ancak bu yöntemle, her içerik yeniden yüklenir. Bu da performansı düşüreceğinden, soruna başka bir yolla çözüm bulmamız gerekecektir.

Gulp İle Sürümleme

Eğer Gulp (ya da Grunt) ile script dosyalarınızı birleştirme işi gerçekleştiriyorsanız, scriptlerinizi kolay bir şekilde versiyonlayabilmeniz mümkündür.

Öncelikle, basit bir gulp task‘ı örnekleyelim;


gulp.task('example-task', function () {

  return gulp.src([
    'scripts/script_1.js',
    'scripts/script_2.js',
    'scripts/script_3.js'
  ])
    .pipe(concat('scripts.min.js'))
    .pipe(gulp.dest('public_html/dist/js'));

});

Bu gulp task‘ı, javascript dosyalarımızı birleştiriyor ve scripts.min.js adıyla public_html/dist/js klasörü içerisine kaydediyor. Bu görevi otomatikleştirerek, her script kaydedildikten sonra tetiklemeniz mümkün. Bizim ilgilendiğimiz konus ise; birleştirilen bu scriptlerin sonuna ufak bir versiyon numarası dahil etmek.

Bu işlem için gulp-insert eklentisinden faydalanacağız.


$ npm install gulp-insert --save

var gulp = require('gulp'),
  concat = require('gulp-concat'),
  insert = require('gulp-insert');

gulp.task('default', function () {

  return gulp.src([
    'scripts/script_1.js',
    'scripts/script_2.js'
  ])
    .pipe(concat('scripts.min.js'))
    .pipe(insert.append('function version () {return "' + new Date().getTime() + '";};'))
    .pipe(gulp.dest('public_html/dist/js'));

});

Gulp taskımızı bu şekilde güncellediğimizde, her script derleme işlemi sonrası yenilenen bir versiyon numaramız olacaktır. Bu adımdan sonra tek yapmamız gereken; script yükleme işlemlerinde bu fonksiyonu kullanarak scriptleri versiyon numarasına göre çağırmaktır.


<html ng-app="MyApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    </head>
    <body ng-controller="MyController">
        <ng-include src="'/template.html?v=' + version"></ng-include>
        <script type="text/javascript">
            angular.module('MyApp', []).controller('MyController', function ($scope) {
                $scope.version = version();
            });
        </script>
    </body>
</html>

Böylelikle; scriptler üzerinde yapılan her güncelleme sonrası yeni bir versiyon numarası oluşur. Uygulama içerisinde yüklenen html ya da javascript dosyaları ilgili versiyon numarasına göre alındığından daha önceden yüklenmemiş versiyonlar tarayıcı tarafından bir daha yüklenmez. Böylelikle yapılan güncellemeler sonrası bir defa yeniden yükleme işlemi gerçekleştirilir.

What About Comments?

I do not use any comment system such as Disqus because of user's privacy. If you want to discuss something about this post, you may open an issue on the repo.

You may check what is the problem with Disqus;