Kaydol

Merhaba Sevgili Floodlar.com Kullanıcısı, Web sitemizde geçirdiğiniz zaman ve bu büyüleyici flood evrenine katılımınız için teşekkür ederiz. Floodların geniş dünyasıyla dolu deneyiminizi daha fazla keşfetmek için, web sitemizi sınırsız olarak kullanabilmeniz adına giriş yapmanız gerekmektedir.

Oturum aç

Merhaba Floodlar.com Kullanıcısı, İlk üç sayfayı tamamladınız, tebrikler! Ancak, floodların devamını görmek ve daha fazla interaktif deneyim yaşamak için giriş yapmanız gerekiyor. Hesabınız yoksa, hızlıca oluşturabilirsiniz. Sınırsız floodlar ve etkileşimler sizleri bekliyor. Giriş yapmayı unutmayın!

Şifremi hatırlamıyorum

Şifreniz mi unuttunuz? Endişelenmeyin! Lütfen kayıtlı e-posta adresinizi giriniz. Size bir bağlantı göndereceğiz ve bu link üzerinden yeni bir şifre oluşturabileceksiniz.

Fil Necati Masonlar Locası Subreddit Adı Nedir? Cevap: ( N31 )

Üzgünüz, flood girme izniniz yok, Flood girmek için giriş yapmalısınız.

Lütfen bu Floodun neden bildirilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Lütfen bu cevabın neden bildirilmesi gerektiğini kısaca açıklayın.

Lütfen bu kullanıcının neden rapor edilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Mobil Uygulamada Açın

Güncel Floodlar En sonuncu Nesne

Uzun vadeli önbelleğe almayı kullanın

Uzun vadeli önbelleğe almayı kullanın

Sonraki şey (uygulama yükleme süresini iyileştiren uygulama boyutunu optimize ettikten sonra önbelleğe almadır. Bunu, uygulamanın bazı kısımlarını istemcide tutmak ve her seferinde yeniden indirmekten kaçınmak için kullanın.

Paket sürüm oluşturma ve önbellek başlıklarını kullanın #

Önbelleğe almanın ortak yaklaşımı şudur:

  1. tarayıcıya bir dosyayı çok uzun bir süre (örneğin bir yıl) için önbelleğe almasını söyleyin:

    # Server header
    Cache-Control: max-age=31536000

    Neye aşina değilseniz Cache-Control yapar, Jake Archibald’ın mükemmel gönderisine bakın en iyi uygulamaları önbelleğe alma hakkında.

  2. ve yeniden indirmeyi zorlamak için değiştirildiğinde dosyayı yeniden adlandırın:

    &LT!-- Before the change -->
    script src="./index-v15.js">&LT/script>

    &LT!-- After the change -->
    script src="./index-v16.js">&LT/script>

Bu yaklaşım, tarayıcıya JS dosyasını indirmesini, önbelleğe almasını ve önbelleğe alınmış kopyayı kullanmasını söyler. Tarayıcı, yalnızca dosya adı değişirse (veya bir yıl geçerse) ağa bağlanır.

Webpack ile aynısını yaparsınız, ancak sürüm numarası yerine dosya karmasını belirtirsiniz. Karmayı dosya adına dahil etmek için şunu kullanın: [chunkhash]:

// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.[chunkhash].js' // → bundle.8e0d62a03.js
}
};

İstemciye göndermek için dosya adına ihtiyacınız varsa, HtmlWebpackPlugin ya da WebpackManifestPlugin.

bu HtmlWebpackPlugin basit ama daha az esnek bir yaklaşımdır. Derleme sırasında bu eklenti, derlenmiş tüm kaynakları içeren bir HTML dosyası oluşturur. Sunucu mantığınız karmaşık değilse, o zaman sizin için yeterli olacaktır:

&LT!-- index.html -->
&LT!DOCTYPE html>
&LT!-- ... -->
script src="bundle.8e0d62a03.js">&LT/script>

bu WebpackManifestPlugin karmaşık bir sunucu bölümünüz varsa yararlı olan daha esnek bir yaklaşımdır. Derleme sırasında, karma içermeyen dosya adları ile karma içeren dosya adları arasında eşleme içeren bir JSON dosyası oluşturur. Hangi dosyayla çalışılacağını bulmak için sunucudaki bu JSON’u kullanın:

// manifest.json
{
"bundle.js": "bundle.8e0d62a03.js"
}

daha fazla okuma #

Bağımlılıkları ve çalışma zamanını ayrı bir dosyaya çıkarın #

Bağımlılıklar #

Uygulama bağımlılıkları, gerçek uygulama kodundan daha az sıklıkta değişme eğilimindedir. Bunları ayrı bir dosyaya taşırsanız, tarayıcı bunları ayrı olarak önbelleğe alabilir ve uygulama kodu her değiştiğinde yeniden indirmez.

Anahtar Terim: Web paketi terminolojisinde, uygulama koduna sahip ayrı dosyalar çağrılır parçalar. Bu ismi daha sonra kullanacağız.

Bağımlılıkları ayrı bir parçaya çıkarmak için üç adımı gerçekleştirin:

  1. Çıktı dosya adını şununla değiştirin: [name].[chunkname].js:

    // webpack.config.js
    module.exports = {
    output: {
    // Before
    filename: 'bundle.[chunkhash].js',
    // After
    filename: '[name].[chunkhash].js'
    }
    };

    Webpack uygulamayı oluşturduğunda, yerini alır [name] bir yığın adıyla. eğer eklemezsek [name] Bu kısımda, parçalar arasında karma değerlerine göre ayrım yapmamız gerekecek – ki bu oldukça zor!

  2. Dönüştür entry alanı bir nesneye dönüştürün:

    // webpack.config.js
    module.exports = {
    // Before
    entry: './index.js',
    // After
    entry: {
    main: './index.js'
    }
    };

    Bu snippet’te “main”, bir yığının adıdır. yerine bu isim konulacaktır. [name] 1. adımdan

    Şimdiye kadar, uygulamayı derlerseniz, bu yığın, tıpkı bizim bu adımları yapmadığımız gibi tüm uygulama kodunu içerecektir. Ama bu bir saniye içinde değişecek.

  3. web paketi 4’teekle optimization.splitChunks.chunks: 'all' seçeneği web paketi yapılandırmanıza ekleyin:

    // webpack.config.js (for webpack 4)
    module.exports = {
    optimization: {
    splitChunks: {
    chunks: 'all'
    }
    }
    };

    Bu seçenek, akıllı kod bölmeyi etkinleştirir. Bununla birlikte, web paketi, 30 kB’den büyük olursa (küçültme ve gzip’ten önce) satıcı kodunu çıkarır. Aynı zamanda ortak kodu da ayıklayacaktır – yapınız birkaç paket üretiyorsa bu yararlıdır (örn. uygulamanızı rotalara bölerseniz).

    web paketi 3’teekle CommonsChunkPlugin:

    // webpack.config.js (for webpack 3)
    module.exports = {
    plugins: [
    new webpack.optimize.CommonsChunkPlugin({
    // A name of the chunk that will include the dependencies.
    // This name is substituted in place of [name] from step 1
    name: 'vendor',

    // A function that determines which modules to include into this chunk
    minChunks: module => module.context && module.context.includes('node_modules'),
    })
    ]
    };

    Bu eklenti, yolların dahil olduğu tüm modülleri alır. node_modules adlı ayrı bir dosyaya taşır. vendor.[chunkhash].js.

Bu değişikliklerden sonra, her derleme bir yerine iki dosya oluşturacak: main.[chunkhash].js Ve vendor.[chunkhash].js (vendors~main.[chunkhash].js web paketi 4 için). Web paketi 4 söz konusu olduğunda, bağımlılıklar küçükse satıcı paketi oluşturulamayabilir ve bunda bir sorun yoktur:

$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
Asset Size Chunks Chunk Names
./main.00bab6fd3100008a42b0.js 82 kB 0 [emitted] main
./vendor.d9e134771799ecdf9483.js 47 kB 1 [emitted] vendor

Tarayıcı bu dosyaları ayrı olarak önbelleğe alır ve yalnızca değişen kodu yeniden indirir.

Web paketi çalışma zamanı kodu #

Ne yazık ki, yalnızca satıcı kodunu çıkarmak yeterli değildir. Uygulama kodunda bir şeyi değiştirmeye çalışırsanız:

// index.js

// E.g. add this:
console.log('Wat');

fark edeceksiniz ki vendor karma da değişir:

                           Asset   Size  Chunks             Chunk Names
./vendor.d9e134771799ecdf9483.js 47 kB 1 [emitted] vendor

                            Asset   Size  Chunks             Chunk Names
./vendor.e6ea4504d61a1cc1c60b.js 47 kB 1 [emitted] vendor

Bunun nedeni, web paketi paketinin, modül kodu dışında çalışma zamanı – modülün yürütülmesini yöneten küçük bir kod parçası. Kodu birden çok dosyaya böldüğünüzde, bu kod parçası yığın kimlikleri ve karşılık gelen dosyalar arasında bir eşleme dahil olmaya başlar:

// vendor.e6ea4504d61a1cc1c60b.js
script.src = __webpack_require__.p + chunkId + "." + {
"0": "2f2269c7f0a55a5c1871"
}[chunkId] + ".js";

Webpack, bu çalışma zamanını en son oluşturulan yığına dahil eder. vendor bizim durumumuzda Ve herhangi bir yığın değiştiğinde, bu kod parçası da değişir ve bütünün oluşmasına neden olur. vendor değiştirmek için parça.

Bunu çözmek için çalışma zamanını ayrı bir dosyaya taşıyalım. Web paketi 4’te, etkinleştirerek elde edilir. optimization.runtimeChunk seçenek:

// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
runtimeChunk: true
}
};

Web paketi 3’te, ile fazladan boş bir öbek oluşturarak bunu yapın. CommonsChunkPlugin:

// webpack.config.js (for webpack 3)
module.exports = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: module => module.context && module.context.includes('node_modules')
}),
// This plugin must come after the vendor one (because webpack
// includes runtime into the last chunk)
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
// minChunks: Infinity means that no app modules
// will be included into this chunk
minChunks: Infinity
})
]
};

Bu değişikliklerden sonra, her derleme üç dosya oluşturacaktır:

$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
Asset Size Chunks Chunk Names
./main.00bab6fd3100008a42b0.js 82 kB 0 [emitted] main
./vendor.26886caf15818fa82dfa.js 46 kB 1 [emitted] vendor
./runtime.79f17c27b335abc7aaf4.js 1.45 kB 3 [emitted] runtime

onları dahil et index.html ters sırayla – ve bitirdiniz:

&LT!-- index.html -->
script src="./runtime.79f17c27b335abc7aaf4.js">&LT/script>
script src="./vendor.26886caf15818fa82dfa.js">&LT/script>
script src="./main.00bab6fd3100008a42b0.js">&LT/script>

daha fazla okuma #

Fazladan bir HTTP isteğini kaydetmek için satır içi web paketi çalışma zamanı #

İşleri daha da iyi hale getirmek için web paketi çalışma zamanını HTML yanıtına yerleştirmeyi deneyin. Yani bunun yerine:

&LT!-- index.html -->
script src="./runtime.79f17c27b335abc7aaf4.js">&LT/script>

Bunu yap:

&LT!-- index.html -->
script>
!function(e){function n(r){if(t[r])return t[r].exports;}} ([]);
&LT/script>

Çalışma zamanı küçüktür ve satır içine almak bir HTTP isteğini kaydetmenize yardımcı olur (HTTP/1 ile oldukça önemlidir; HTTP/2 ile daha az önemlidir, ancak yine de bir etkisi olabilir).

İşte nasıl yapılacağı.

HtmlWebpackPlugin ile HTML oluşturursanız #

Eğer kullanırsan HtmlWebpackPlugin bir HTML dosyası oluşturmak için, Satır İçi Kaynak Eklentisi tüm ihtiyacın olan:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
plugins: [
new HtmlWebpackPlugin({
inlineSource: 'runtime~.+\\.js',
}),
new InlineSourcePlugin()
]
};

Özel bir sunucu mantığı kullanarak HTML oluşturursanız #

Web paketi 4 ile:

  1. Ekle WebpackManifestPlugin çalışma zamanı öbeğinin oluşturulan adını bilmek için:

    // webpack.config.js (for webpack 4)
    const ManifestPlugin = require('webpack-manifest-plugin');

    module.exports = {
    plugins: [
    new ManifestPlugin()
    ]
    };

    Bu eklentiye sahip bir derleme, şuna benzeyen bir dosya oluşturur:

    // manifest.json
    {
    "runtime~main.js": "runtime~main.8e0d62a03.js"
    }

  2. Çalışma zamanı öbeğinin içeriğini uygun bir şekilde satır içine alın. Örneğin, Node.js ve Express ile:

    // server.js
    const fs = require('fs');
    const manifest = require('./manifest.json');
    const runtimeContent = fs.readFileSync(manifest['runtime~main.js'], 'utf-8');

    app.get("http://web.dev/", (req, res) => {
    res.send(`

    &LTscript>
    ${runtimeContent}&LT/script>

    `
    );
    });

Veya web paketi 3 ile:

  1. Belirterek çalışma zamanı adını statik yapın filename:

    module.exports = {
    plugins: [
    new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime',
    minChunks: Infinity,
    filename: 'runtime.js'
    })
    ]
    };

  2. satır içi runtime.js içeriği uygun bir şekilde Örneğin, Node.js ve Express ile:

    // server.js
    const fs = require('fs');
    const runtimeContent = fs.readFileSync('./runtime.js', 'utf-8');

    app.get("http://web.dev/", (req, res) => {
    res.send(`

    &LTscript>
    ${runtimeContent}&LT/script>

    `
    );
    });

Şu anda ihtiyacınız olmayan yavaş yükleme kodu #

Bazen bir sayfada giderek daha az önemli kısımlar bulunur:

  • YouTube’a bir video sayfası yüklerseniz, videoyu yorumlardan daha çok önemsersiniz. Burada video yorumlardan daha önemlidir.
  • Bir haber sitesinde bir yazı açarsanız, yazının metnine reklamlardan daha çok önem verirsiniz. Burada metin, reklamlardan daha önemlidir.

Bu gibi durumlarda, önce yalnızca en önemli öğeleri indirerek ve kalan parçaları daha sonra yavaş yükleyerek ilk yükleme performansını iyileştirin. Kullanmak the import() işlev Ve kod bölme bunun için:

// videoPlayer.js
export function renderVideoPlayer() {}

// comments.js
export function renderComments() {}

// index.js
import {renderVideoPlayer} from './videoPlayer';
renderVideoPlayer();

// …Custom event listener
onShowCommentsClick(() => {
import('./comments').then((comments) => {
comments.renderComments();
});
});

import() belirli bir modülü dinamik olarak yüklemek istediğinizi belirtir. webpack gördüğünde import('./module.js')bu modülü ayrı bir parçaya taşır:

$ webpack
Hash: 39b2a53cb4e73f0dc5b2
Version: webpack 3.8.1
Time: 4273ms
Asset Size Chunks Chunk Names
./0.8ecaf182f5c85b7a8199.js 22.5 kB 0 [emitted]
./main.f7e53d8e13e9a2745d6d.js 60 kB 1 [emitted] main
./vendor.4f14b6326a80f4752a98.js 46 kB 2 [emitted] vendor
./runtime.79f17c27b335abc7aaf4.js 1.45 kB 3 [emitted] runtime

ve yalnızca yürütme eriştiğinde indirir import() işlev.

Bu yapacak main daha küçük paket, ilk yükleme süresini iyileştirir. Dahası, önbelleğe almayı iyileştirir – ana öbekteki kodu değiştirirseniz, yorumlar öbeği etkilenmez.

daha fazla okuma #

Kodu rotalara ve sayfalara ayırın #

Uygulamanızın birden çok yolu veya sayfası varsa, ancak kodu içeren yalnızca tek bir JS dosyası varsa (tek bir main yığın), muhtemelen her istekte fazladan bayt sunuyorsunuzdur. Örneğin, bir kullanıcı sitenizin ana sayfasını ziyaret ettiğinde:

farklı bir sayfada bulunan bir makaleyi işlemek için kodu yüklemeleri gerekmez, ancak onu yüklerler. Ayrıca, kullanıcı her zaman yalnızca ana sayfayı ziyaret ederse ve makale kodunda bir değişiklik yaparsanız, web paketi tüm paketi geçersiz kılar ve kullanıcının tüm uygulamayı yeniden indirmesi gerekir.

Uygulamayı sayfalara (veya tek sayfalık bir uygulamaysa rotalara) bölersek, kullanıcı yalnızca ilgili kodu indirir. Ayrıca, tarayıcı uygulama kodunu daha iyi önbelleğe alır: ana sayfa kodunu değiştirirseniz, web paketi yalnızca ilgili öbeği geçersiz kılar.

Tek sayfalı uygulamalar için #

Tek sayfalı uygulamaları yollara göre bölmek için şunu kullanın: import() (bkz. “Şu anda ihtiyacınız olmayan yavaş yükleme kodu” bölüm). Bir çerçeve kullanıyorsanız, bunun için mevcut bir çözümü olabilir:

Geleneksel çok sayfalı uygulamalar için #

Geleneksel uygulamaları sayfalara göre bölmek için web paketini kullanın giriş noktaları. Uygulamanızın üç tür sayfası varsa: ana sayfa, makale sayfası ve kullanıcı hesabı sayfası, – üç girişi olmalıdır:

// webpack.config.js
module.exports = {
entry: {
home: './src/Home/index.js',
article: './src/Article/index.js',
profile: './src/Profile/index.js'
}
};

Webpack, her giriş dosyası için ayrı bir bağımlılık ağacı oluşturacak ve yalnızca o girdi tarafından kullanılan modülleri içeren bir paket oluşturacaktır:

$ webpack
Hash: 318d7b8490a7382bf23b
Version: webpack 3.8.1
Time: 4273ms
Asset Size Chunks Chunk Names
./0.8ecaf182f5c85b7a8199.js 22.5 kB 0 [emitted]
./home.91b9ed27366fe7e33d6a.js 18 kB 1 [emitted] home
./article.87a128755b16ac3294fd.js 32 kB 2 [emitted] article
./profile.de945dc02685f6166781.js 24 kB 3 [emitted] profile
./vendor.4f14b6326a80f4752a98.js 46 kB 4 [emitted] vendor
./runtime.318d7b8490a7382bf23b.js 1.45 kB 5 [emitted] runtime

Dolayısıyla, yalnızca makale sayfası Lodash kullanıyorsa, home ve profile paketler bunu içermeyecek ve kullanıcının ana sayfayı ziyaret ederken bu kitaplığı indirmesi gerekmeyecek.

Ayrı bağımlılık ağaçlarının dezavantajları vardır. İki giriş noktası Lodash kullanıyorsa ve bağımlılıklarınızı bir satıcı paketine taşımadıysanız, her iki giriş noktası da Lodash’ın bir kopyasını içerecektir. Bunu çözmek için web paketi 4’te, ekle optimization.splitChunks.chunks: 'all' seçeneği web paketi yapılandırmanıza ekleyin:

// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
};

Bu seçenek, akıllı kod bölmeyi etkinleştirir. Bu seçenekle, webpack otomatik olarak ortak kodu arar ve onu ayrı dosyalara çıkarır.

Veya, web paketi 3’te, kullan CommonsChunkPlugin – ortak bağımlılıkları yeni bir belirtilen dosyaya taşıyacaktır:

module.exports = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2 // 2 is the default value
})
]
};

ile oynamaktan çekinmeyin minChunks en iyisini bulmak için değer. Genellikle küçük tutmak istersiniz, ancak parça sayısı arttıkça artar. Örneğin, 3 parça için, minChunks 2 olabilir, ancak 30 parça için 8 olabilir – çünkü 2’de tutarsanız, çok fazla modül ortak dosyaya girerek onu çok fazla şişirir.

daha fazla okuma #

Modül kimliklerini daha kararlı hale getirin #

Kodu oluştururken, webpack her modüle bir kimlik atar. Daha sonra bu kimlikler require()paketin içinde. Kimlikleri genellikle yapı çıktısında modül yollarından hemen önce görürsünüz:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
Asset Size Chunks Chunk Names
./0.8ecaf182f5c85b7a8199.js 22.5 kB 0 [emitted]
./main.4e50a16675574df6a9e9.js 60 kB 1 [emitted] main
./vendor.26886caf15818fa82dfa.js 46 kB 2 [emitted] vendor
./runtime.79f17c27b335abc7aaf4.js 1.45 kB 3 [emitted] runtime

↓ burada

[0] ./index.js 29 kB {1} [built]
[2] (webpack)/buildin/global.js 488 bytes {2} [built]
[3] (webpack)/buildin/module.js 495 bytes {2} [built]
[4] ./comments.js 58 kB {0} [built]
[5] ./ads.js 74 kB {1} [built]
+ 1 hidden module

Varsayılan olarak, ID’ler bir sayaç kullanılarak hesaplanır (yani, birinci modülün ID’si 0’dır, ikincisinin ID’si 1’dir, vb.). Bununla ilgili sorun, yeni bir modül eklediğinizde, sonraki tüm modüllerin kimliklerini değiştirerek modül listesinin ortasında görünebilmesidir:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
Asset Size Chunks Chunk Names
./0.5c82c0f337fcb22672b5.js 22 kB 0 [emitted]
./main.0c8b617dfc40c2827ae3.js 82 kB 1 [emitted] main
./vendor.26886caf15818fa82dfa.js 46 kB 2 [emitted] vendor
./runtime.79f17c27b335abc7aaf4.js 1.45 kB 3 [emitted] runtime
[0] ./index.js 29 kB {1} [built]
[2] (webpack)/buildin/global.js 488 bytes {2} [built]
[3] (webpack)/buildin/module.js 495 bytes {2} [built]

↓ Yeni bir modül ekledik…

[4] ./webPlayer.js 24 kB {1} [built]

↓ Ve bakın ne yapmış! comments.js artık 4 yerine ID 5’e sahip

[5] ./comments.js 58 kB {0} [built]

ads.js artık 5 yerine ID 6’ya sahip

[6] ./ads.js 74 kB {1} [built]
+ 1 hidden module

Bu, gerçek kodları değişmemiş olsa bile, değişen kimliklere sahip modülleri içeren veya bunlara bağlı olan tüm parçaları geçersiz kılar. Bizim durumumuzda, 0 yığın (ile yığın comments.js) ve main yığın (diğer uygulama koduna sahip yığın) geçersiz kılınırken, yalnızca main biri olmalıydı.

Bunu çözmek için, modül kimliklerinin HashedModuleIdsPlugin. Sayaç tabanlı kimlikleri modül yollarının karma değerleri ile değiştirir:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
Asset Size Chunks Chunk Names
./0.6168aaac8461862eab7a.js 22.5 kB 0 [emitted]
./main.a2e49a279552980e3b91.js 60 kB 1 [emitted] main
./vendor.ff9f7ea865884e6a84c8.js 46 kB 2 [emitted] vendor
./runtime.25f5d0204e4f77fa57a1.js 1.45 kB 3 [emitted] runtime

↓ burada

[3IRH] ./index.js 29 kB {1} [built]
[DuR2] (webpack)/buildin/global.js 488 bytes {2} [built]
[JkW7] (webpack)/buildin/module.js 495 bytes {2} [built]
[LbCc] ./webPlayer.js 24 kB {1} [built]
[lebJ] ./comments.js 58 kB {0} [built]
[02Tr] ./ads.js 74 kB {1} [built]
+ 1 hidden module

Bu yaklaşımla, bir modülün kimliği yalnızca o modülü yeniden adlandırırsanız veya taşırsanız değişir. Yeni modüller, diğer modüllerin kimliklerini etkilemez.

Eklentiyi etkinleştirmek için şuraya ekleyin: plugins yapılandırma bölümü:

// webpack.config.js
module.exports = {
plugins: [
new webpack.HashedModuleIdsPlugin()
]
};

daha fazla okuma #

Özetliyor #

  • Paketi önbelleğe alın ve paket adını değiştirerek sürümler arasında ayrım yapın
  • Paketi uygulama koduna, satıcı koduna ve çalışma zamanına ayırın
  • Bir HTTP isteğini kaydetmek için çalışma zamanını satır içine alın
  • Tembel yükleme ile kritik olmayan kod import
  • Gereksiz şeyleri yüklemekten kaçınmak için kodu rotalara/sayfalara göre ayırın

İlgili Mesajlar

Yorum eklemek için giriş yapmalısınız.