Tarayıcıların %90’ından fazlası modern JavaScript’i çalıştırma yeteneğine sahiptir, ancak eski JavaScript’in yaygınlığı bugün web’de büyük bir performans sorunu kaynağı olmaya devam etmektedir.
Modern JavaScript #
Modern JavaScript, belirli bir ECMAScript özelliği sürümünde yazılmış kod olarak değil, tüm modern tarayıcılar tarafından desteklenen sözdiziminde yazılmış olarak karakterize edilir. Chrome, Edge, Firefox ve Safari gibi modern web tarayıcıları, Tarayıcı pazarının %90’ıve aynı temel oluşturma motorlarına dayanan farklı tarayıcılar, ek bir %5’i oluşturur. Bu, küresel web trafiğinin %95’inin son 10 yılda en yaygın kullanılan JavaScript dili özelliklerini destekleyen tarayıcılardan geldiği anlamına gelir:
- Sınıflar (ES2015)
- Ok işlevleri (ES2015)
- Jeneratörler (ES2015)
- Blok kapsamı (ES2015)
- Yıkım (ES2015)
- Dinlenme ve yayılma parametreleri (ES2015)
- Nesne kısayolu (ES2015)
- Zaman uyumsuz/bekliyor (ES2017)
Dil belirtiminin daha yeni sürümlerindeki özellikler genellikle modern tarayıcılarda daha az tutarlı desteğe sahiptir. Örneğin, pek çok ES2020 ve ES2021 özelliği, tarayıcı pazarının yalnızca %70’inde desteklenmektedir – tarayıcıların çoğunluğu hâlâ desteklenmektedir, ancak bu özelliklere doğrudan güvenmek için yeterli değildir. Bu, “modern” JavaScript’in hareketli bir hedef olmasına rağmen, ES2017’nin en geniş tarayıcı uyumluluğu yelpazesine sahip olduğu anlamına gelir. yaygın olarak kullanılan modern sözdizimi özelliklerinin çoğunu içerirken. Başka bir deyişle, ES2017, günümüzün modern sözdizimine en yakın olanıdır.
Eski JavaScript #
Eski JavaScript, yukarıdaki dil özelliklerinin tümünü kullanmaktan özellikle kaçınan koddur. Çoğu geliştirici, kaynak kodunu modern sözdizimini kullanarak yazar, ancak daha fazla tarayıcı desteği için her şeyi eski sözdiziminde derler. Eski sözdizimine göre derleme, tarayıcı desteğini artırır, ancak etki genellikle sandığımızdan daha küçüktür. Çoğu durumda destek, önemli bir maliyete neden olurken yaklaşık %95’ten %98’e çıkar:
-
Eski JavaScript, eşdeğer modern koddan genellikle yaklaşık %20 daha büyük ve daha yavaştır. Alet eksiklikleri ve yanlış yapılandırma genellikle bu boşluğu daha da genişletir.
-
Yüklü kitaplıklar, tipik üretim JavaScript kodunun %90 kadarını oluşturur. Kitaplık kodu, modern kod yayınlayarak önlenebilecek çoklu doldurma ve yardımcı çoğaltma nedeniyle daha da yüksek bir eski JavaScript ek yüküne neden olur.
npm’de modern JavaScript #
Son zamanlarda, Node.js standart hale getirdi. "exports" tanımlanacak alan bir paket için giriş noktaları:
{
"exports": "./index.js"
}
Tarafından başvurulan modüller "exports" alanı, ES2019’u destekleyen en az 12.8 Node sürümünü ima eder. Bu, kullanılarak başvurulan herhangi bir modülün "exports" alan olabilir modern JavaScript ile yazılmış. Paket tüketicileri, bir "exports" alan modern kodu içerir ve gerekirse aktarılır.
Yalnızca modern #
Modern kodla bir paket yayınlamak ve onu bir bağımlılık olarak kullandıklarında aktarma işini tüketiciye bırakmak istiyorsanız, yalnızca "exports" alan.
{
"name": "foo",
"exports": "./modern.js"
}
Eski geri dönüş ile modern #
Kullan "exports" alan ile birlikte "main" paketinizi modern kod kullanarak yayınlamak ama aynı zamanda eski tarayıcılar için bir ES5 + CommonJS yedeği eklemek için.
{
"name": "foo",
"exports": "./modern.js",
"main": "./legacy.cjs"
}
Eski geri dönüş ve ESM paketleyici optimizasyonları ile modern #
Bir geri dönüş CommonJS giriş noktası tanımlamaya ek olarak, "module" alan, benzer bir eski geri dönüş paketine işaret etmek için kullanılabilir, ancak JavaScript modülü sözdizimini (import Ve export).
{
"name": "foo",
"exports": "./modern.js",
"main": "./legacy.cjs",
"module": "./module.js"
}
Webpack ve Rollup gibi birçok paketleyici, modül özelliklerinden yararlanmak ve ağaç sallamayı etkinleştirmek için bu alana güvenir. Bu hala herhangi bir modern kod içermeyen eski bir pakettir. import/export sözdizimi, bu nedenle modern kodu, gruplama için hala optimize edilmiş eski bir geri dönüşle birlikte göndermek için bu yaklaşımı kullanın.
Uygulamalarda modern JavaScript #
Üçüncü taraf bağımlılıkları, web uygulamalarındaki tipik üretim JavaScript kodunun büyük çoğunluğunu oluşturur. Npm bağımlılıkları tarihsel olarak eski ES5 sözdizimi olarak yayınlanmış olsa da, bu artık güvenli bir varsayım değildir ve bağımlılık güncellemelerinin uygulamanızdaki tarayıcı desteğini bozma riski taşır.
Modern JavaScript’e taşınan artan sayıda npm paketiyle, derleme araçlarının bunları işlemek için ayarlandığından emin olmak önemlidir. Güvendiğiniz bazı npm paketlerinin zaten modern dil özelliklerini kullanıyor olma ihtimali yüksektir. Eski tarayıcılarda uygulamanızı bozmadan npm’den modern kodu kullanmak için kullanılabilecek bir dizi seçenek vardır, ancak genel fikir, derleme sisteminin aktarım bağımlılıklarını kaynak kodunuzla aynı sözdizimi hedefine sahip olmaktır.
web paketi #
Webpack 5’ten itibaren, paketler ve modüller için kod üretirken webpack’in hangi sözdizimini kullanacağını yapılandırmak artık mümkün. Bu, kodunuzu veya bağımlılıklarınızı aktarmaz, yalnızca webpack tarafından oluşturulan “glue” kodunu etkiler. Tarayıcı destek hedefini belirtmek için bir tarayıcı listesi yapılandırması projenize ekleyin veya doğrudan web paketi yapılandırmanızda yapın:
module.exports = {
target: ['web', 'es2017'],
};
Modern bir ES Modülleri ortamını hedeflerken gereksiz sarmalayıcı işlevlerini atlayan optimize edilmiş paketler oluşturmak için web paketini yapılandırmak da mümkündür. Bu aynı zamanda web paketini kullanarak kod bölmeli paketleri yükleyecek şekilde yapılandırır. <script type="module">.
module.exports = {
target: ['web', 'es2017'],
output: {
module: true,
},
experiments: {
outputModule: true,
},
};
Optimize Plugin ve BabelEsmPlugin gibi eski tarayıcıları desteklerken modern JavaScript’i derlemeyi ve göndermeyi mümkün kılan bir dizi web paketi eklentisi mevcuttur.
Eklentiyi Optimize Et #
Eklentiyi Optimize Et her bir kaynak dosya yerine nihai paket kodu modern JavaScript’ten eski JavaScript’e dönüştüren bir web paketi eklentisidir. Web paketi yapılandırmanızın, birden fazla çıktı veya sözdizimi için özel bir dallanma olmadan her şeyin modern JavaScript olduğunu varsaymasına izin veren bağımsız bir kurulumdur.
Optimize Plugin, bireysel modüller yerine paketler üzerinde çalıştığı için, uygulamanızın kodunu ve bağımlılıklarınızı eşit şekilde işler. Bu, npm’den modern JavaScript bağımlılıklarının kullanılmasını güvenli hale getirir, çünkü bunların kodları paketlenecek ve doğru sözdizimine aktarılacaktır. Modern ve eski tarayıcılar için ayrı paketler oluşturmaya devam ederken, iki derleme adımını içeren geleneksel çözümlerden daha hızlı olabilir. İki demet seti, modül/nomodül modeli kullanılarak yüklenmek üzere tasarlanmıştır.
// webpack.config.js
const OptimizePlugin = require('optimize-plugin');module.exports = {
// ...
plugins: [new OptimizePlugin()],
};
Optimize Plugin genellikle modern ve eski kodları ayrı ayrı paketleyen özel web paketi yapılandırmalarından daha hızlı ve daha verimli olabilir. Ayrıca koşmayı da yönetir Babil sizin için ve kullanarak demetleri küçültür Terser modern ve eski çıktılar için ayrı optimum ayarlarla. Son olarak, oluşturulan eski paketlerin ihtiyaç duyduğu çoklu doldurmalar, özel bir komut dosyasına çıkarılır, böylece hiçbir zaman çoğaltılmazlar veya daha yeni tarayıcılara gereksiz yere yüklenmezler.
BabelEsmPlugin #
BabelEsmPlugin ile birlikte çalışan bir webpack eklentisidir. @babel/preset-env modern tarayıcılara daha az aktarılan kod göndermek için mevcut paketlerin modern sürümlerini oluşturmak. tarafından kullanılan modül/nomodül için en popüler hazır çözümdür. Sonraki.js Ve Preakt CLI.
// webpack.config.js
const BabelEsmPlugin = require('babel-esm-plugin');module.exports = {
//...
module: {
rules: [
// your existing babel-loader configuration:
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
plugins: [new BabelEsmPlugin()],
};
BabelEsmPlugin uygulamanızın büyük ölçüde ayrı iki derlemesini çalıştırdığından, çok çeşitli web paketi yapılandırmalarını destekler. Büyük uygulamalar için iki kez derlemek biraz fazladan zaman alabilir, ancak bu teknik izin verir BabelEsmPlugin mevcut web paketi yapılandırmalarına sorunsuz bir şekilde entegre etmek ve onu mevcut en uygun seçeneklerden biri haline getirmek için.
babel-loader’ı node_modules iletmek için yapılandırın #
eğer kullanıyorsanız babel-loader önceki iki eklentiden biri olmadan, modern JavaScript npm modüllerini kullanmak için gereken önemli bir adım var. İki ayrı tanımlama babel-loader yapılandırmalar, içinde bulunan modern dil özelliklerinin otomatik olarak derlenmesini mümkün kılar. node_modules ES2017’ye, projenizin yapılandırmasında tanımlanan Babel eklentileri ve hazır ayarlarıyla kendi birinci taraf kodunuzu aktarmaya devam edin. Bu, bir modül/nomodül kurulumu için modern ve eski paketler oluşturmaz, ancak eski tarayıcıları bozmadan modern JavaScript içeren npm paketlerini kurmayı ve kullanmayı mümkün kılar.
webpack-eklentisi-modern-npm olan npm bağımlılıklarını derlemek için bu tekniği kullanır. "exports" alan onların package.jsonçünkü bunlar modern sözdizimini içerebilir:
// webpack.config.js
const ModernNpmPlugin = require('webpack-plugin-modern-npm');module.exports = {
plugins: [
// auto-transpile modern stuff found in node_modules
new ModernNpmPlugin(),
],
};
Alternatif olarak, tekniği kontrol ederek web paketi yapılandırmanızda manuel olarak uygulayabilirsiniz. "exports" alan package.json çözüldükçe modüllerin sayısı. Kısa olması için önbelleğe alma atlanırsa, özel bir uygulama şöyle görünebilir:
// webpack.config.js
module.exports = {
module: {
rules: [
// Transpile for your own first-party code:
{
test: /\.js$/i,
loader: 'babel-loader',
exclude: /node_modules/,
},
// Transpile modern dependencies:
{
test: /\.js$/i,
include(file) {
let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
try {
return dir && !!require(dir[0] + 'package.json').exports;
} catch (e) {}
},
use: {
loader: 'babel-loader',
options: {
babelrc: false,
configFile: false,
presets: ['@babel/preset-env'],
},
},
},
],
},
};
Bu yaklaşımı kullanırken, küçültücünüz tarafından modern sözdiziminin desteklenmesini sağlamanız gerekir. İkisi birden Terser Ve çirkinleştirme belirtme seçeneği var {ecma: 2017} sıkıştırma ve biçimlendirme sırasında ES2017 sözdizimini korumak ve bazı durumlarda oluşturmak için.
Toplama #
Toplama, tek bir yapının parçası olarak birden çok paket kümesi oluşturmak için yerleşik desteğe sahiptir ve varsayılan olarak modern kod üretir. Sonuç olarak, Toplama, halihazırda kullanmakta olduğunuz resmi eklentilerle modern ve eski paketler oluşturacak şekilde yapılandırılabilir.
@toplama/eklenti-babel #
Toplama kullanıyorsanız, getBabelOutputPlugin() yöntem (Rollup tarafından sağlanan resmi Babil eklentisi) kodu, tek tek kaynak modüller yerine oluşturulan paketler halinde dönüştürür. Rollup, her biri kendi eklentisine sahip tek bir yapının parçası olarak birden çok paket kümesi oluşturmak için yerleşik desteğe sahiptir. Bunu, her birini farklı bir Babel çıkış eklentisi yapılandırmasından geçirerek, modern ve eski sürümler için farklı paketler oluşturmak için kullanabilirsiniz:
// rollup.config.js
import {getBabelOutputPlugin} from '@rollup/plugin-babel';export default {
input: 'src/index.js',
output: [
// modern bundles:
{
format: 'es',
plugins: [
getBabelOutputPlugin({
presets: [
[
'@babel/preset-env',
{
targets: {esmodules: true},
bugfixes: true,
loose: true,
},
],
],
}),
],
},
// legacy (ES5) bundles:
{
format: 'amd',
entryFileNames: '[name].legacy.js',
chunkFileNames: '[name]-[hash].legacy.js',
plugins: [
getBabelOutputPlugin({
presets: ['@babel/preset-env'],
}),
],
},
],
};
Toplama ve web paketi yüksek düzeyde yapılandırılabilirdir; bu, genellikle her projenin, bağımlılıklarda modern JavaScript sözdizimini etkinleştirmek için yapılandırmasını güncellemesi gerektiği anlamına gelir. Konvansiyonu ve varsayılanları yapılandırmaya tercih eden daha yüksek seviyeli oluşturma araçları da vardır. Parsel, kar paketi, Vite Ve WMR. Bu araçların çoğu, npm bağımlılıklarının modern sözdizimi içerebileceğini varsayar ve üretim için oluştururken bunları uygun sözdizimi düzeylerine aktarır.
Webpack ve Rollup için özel eklentilere ek olarak, eski geri dönüşlere sahip modern JavaScript paketleri, kullanılarak herhangi bir projeye eklenebilir. yetki devri. Gerileme, bir yapı sisteminden gelen çıktıyı eski JavaScript türevleri üretmek için dönüştüren, paket oluşturma ve dönüşümlerin modern bir çıktı hedefi varsaymasını sağlayan bağımsız bir araçtır.