Küçültme (Minimization) Nedir ?
Öncesi: Proje Testleri
Küçültmek işlemi en basit anlatımla, programlama kodunun gereksiz karakterlerini işlevini değiştirmeden temizleme işidir. Bu karakterler çoğunlukla aşağıdakilerden oluşur;
- Boşluk karakterleri,
- Yeni satır karakterleri,
- Yorumlar,
- Blok sınırlayıcılar.
Peki bunu neden yapıyoruz, ya da yapmalıyız? Küçültme; kaynak kodunun boyutunu azalttığından ağ üzerinden iletimi daha verimli hale gelir. Küçük ve/veya önemsiz kod parçacıklarının el ile küçültülebilir. Ancak büyük kod parçacıkları için ölçeklenebilir bir çözüm değidir. Bunun için çeşitli araçlar geliştirilmiştir. Peki oluşturduğum projemde bu araçlardan hangisini kullanmalıydım. Kullanıcıların azımsanmayacak çoğunluğunun; kodu sıkıştıran ve küçülten "UglifyJS" kullandığını gördüm. Bu kütüphane hem kodun daha küçük boyutlu olmasını hemde tarayıcılaer tarafından kolay yorumlanmasını sağlıyordu ancak sayfasında belirttiği üzere şu an ECMAScript 2015 e kadar desteklemekte.
Bu durumda başka bir alternatif bulmalıydım.
Derleme aşamasında @babel kutuphanesi kullandığım için babel-minify kütüphanesine göz atma fırsatı buldum. Babel-minify dan önce @babel kütüphanesi kullandığımızda, babel-transpile ile kod dönüştürülüp daha sonra "UglifyJS" işlemine tabi tutuluyor. Ancak bu işlem dosya boyutunu arttırdığından projem için optimal bir çözüm olmadığına karar verdim ve tabi babel-minify henüz başlangıç aşamasında olduğu için ürün (production) aşamasında kullanılmasının önerilmediğini belitmişler. Genel olarak
Oluşturduğum projenin kesinlikle ürün aşamasına gerecek bir ürün olmadığının farkındalığında olmakla beraber konu herhangi projede oluşturuken yaşanan sıkıntılar kısmını kapsadığından bu kütüphaneyi de listeden eledim.
Daha sonra ES6+ destekleyen ve kıyaslama yapılan Terser aracına rastladım. Çözümleme zamanı ve oluşturma zamanı daha küçük olduğundan bu aracı kullanmaya karar verdim ve sayfasında belirttiği üzere gerekli kurulumları gerçekleştirdim.
ve package.json dosyamda "script" bölümünde bazı değişiklikler yaptım.
komut satırından "npm run build" dediğimde minify dosyasının "dist" dizininde oluştuğunu gördüm. Test ve küçültme işlemlerini yapmıştım. Ancak henüz derleme aşamasına bile gelmeden yazdığım kodları denetleyecek bir mekanizma var mıydı? Çünkü test,build işlemini çalıştırırken bir kaç kez ';' hatası yapmış, kodu dönüp düzeltmek durumunda kalmıştım. Bu sorun beni eslint aracına götürdü.
Küçültmek işlemi en basit anlatımla, programlama kodunun gereksiz karakterlerini işlevini değiştirmeden temizleme işidir. Bu karakterler çoğunlukla aşağıdakilerden oluşur;
- Boşluk karakterleri,
- Yeni satır karakterleri,
- Yorumlar,
- Blok sınırlayıcılar.
Peki bunu neden yapıyoruz, ya da yapmalıyız? Küçültme; kaynak kodunun boyutunu azalttığından ağ üzerinden iletimi daha verimli hale gelir. Küçük ve/veya önemsiz kod parçacıklarının el ile küçültülebilir. Ancak büyük kod parçacıkları için ölçeklenebilir bir çözüm değidir. Bunun için çeşitli araçlar geliştirilmiştir. Peki oluşturduğum projemde bu araçlardan hangisini kullanmalıydım. Kullanıcıların azımsanmayacak çoğunluğunun; kodu sıkıştıran ve küçülten "UglifyJS" kullandığını gördüm. Bu kütüphane hem kodun daha küçük boyutlu olmasını hemde tarayıcılaer tarafından kolay yorumlanmasını sağlıyordu ancak sayfasında belirttiği üzere şu an ECMAScript 2015 e kadar desteklemekte.
Bu durumda başka bir alternatif bulmalıydım.
Derleme aşamasında @babel kutuphanesi kullandığım için babel-minify kütüphanesine göz atma fırsatı buldum. Babel-minify dan önce @babel kütüphanesi kullandığımızda, babel-transpile ile kod dönüştürülüp daha sonra "UglifyJS" işlemine tabi tutuluyor. Ancak bu işlem dosya boyutunu arttırdığından projem için optimal bir çözüm olmadığına karar verdim ve tabi babel-minify henüz başlangıç aşamasında olduğu için ürün (production) aşamasında kullanılmasının önerilmediğini belitmişler. Genel olarak
Oluşturduğum projenin kesinlikle ürün aşamasına gerecek bir ürün olmadığının farkındalığında olmakla beraber konu herhangi projede oluşturuken yaşanan sıkıntılar kısmını kapsadığından bu kütüphaneyi de listeden eledim.
Daha sonra ES6+ destekleyen ve kıyaslama yapılan Terser aracına rastladım. Çözümleme zamanı ve oluşturma zamanı daha küçük olduğundan bu aracı kullanmaya karar verdim ve sayfasında belirttiği üzere gerekli kurulumları gerçekleştirdim.
$ npm install --global terser $ npm install --save-dev terser
ve package.json dosyamda "script" bölümünde bazı değişiklikler yaptım.
...
"scripts": {
"init": "mkdir dist",
"clean": "rm -rf dist",
"prebuild": "npm run clean && npm run init",
"test": "mocha --recursive ./test --require @babel/register",
"build": "npm run build:normal && npm run build:terser",
"build:normal": "npm test && babel src -d dist",
"build:terser": "terser dist/org/example/*.js -c toplevel,sequences=false,drop_console=true,ecma=2016 -m --mangle-props -o dist/js-calculator.min.js"
}
...
komut satırından "npm run build" dediğimde minify dosyasının "dist" dizininde oluştuğunu gördüm. Test ve küçültme işlemlerini yapmıştım. Ancak henüz derleme aşamasına bile gelmeden yazdığım kodları denetleyecek bir mekanizma var mıydı? Çünkü test,build işlemini çalıştırırken bir kaç kez ';' hatası yapmış, kodu dönüp düzeltmek durumunda kalmıştım. Bu sorun beni eslint aracına götürdü.
Yorumlar
Yorum Gönder