वेबपैक gzip संपीड़ित बंडल परोसा नहीं जा रहा है, असंपीड़ित बंडल

Question

मैं पहली बार वेबपैक को आजमाने की कोशिश कर रहा हूं। मैं कुछ समय के लिए ब्राउज़र के साथ Gulp का उपयोग कर रहा हूँ और इसके साथ बहुत सहज हूँ। इस बिंदु पर, मैं बस कुछ वेबपैक प्लगइन का परीक्षण कर रहा हूं। जैसे संपीड़न-वेबपैक-प्लगइन। मैंने पहले कभी संपीड़न का उपयोग नहीं किया है, इसलिए अगर मैं कोई नोब गलती कर रहा हूं तो मेरे साथ बेकार है।

नीचे मेरा webpack.config.js है। नतीजा यह है कि मुझे main.js, main.js.gz, main.css और index.html मिलता है। Main.js को index.html में इंजेक्शन दिया गया है, लेकिन यदि मैं अपने ब्राउज़र में index.html खोलता हूं, तो यह असम्पीडित main.js परोसता है, संपीड़ित main.js.gz नहीं। मैंने पढ़ा था कि मुझे अपने स्क्रिप्ट टैग में .gz एक्सटेंशन शामिल करने की आवश्यकता नहीं होगी, और एचटीएमएल-वेबपैक-प्लगइन में यह शामिल नहीं है, इसलिए मुझे लगा कि चीजें सही तरीके से काम कर रही हैं, फिर भी असम्पीडित main.js परोसा जाता है, संपीड़ित एक के बजाय।

var path = require('path'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var CompressionPlugin = require('compression-webpack-plugin'); 

module.exports = { 
    entry: './app/scripts/main.js', 
    output: { 
    path: path.join(__dirname, 'public'), 
    filename: '[name].js', 
    chunkFilename: '[id].js' 
    }, 
    module: { 
    loaders: [ 
     {test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')}, 
     {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'} 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     hash: true, 
     template: 'app/index.html', 
     inject: 'body' 
    }), 
    new ExtractTextPlugin('[name].css'), 
    new CompressionPlugin() 
    ] 
}; 

Answer 1

script -tag में शामिल main.js के मामले में main.js.gz बजाय main.js लोड करने के लिए, आप अपने वेब सर्वर (अपाचे, nginx, आदि)

कॉन्फ़िगर करने के लिए है कि विन्यास याद रखें .js.gz लोड करना चाहिए की जरूरत है या .js ब्राउज़र पर gzip स्वीकार करता है पर निर्भर करता है। वेब-सर्वर इसे HTTP अनुरोध शीर्षलेख में देख सकता है Accept-Encoding: gzip, deflate

ब्राउज़र devtools में आप किसी भी मामले में main.js देखेंगे।

Answer 2

आप सशर्त रूप से सांख्यिकी को nginx gzip static module के साथ आसानी से सेवा दे सकते हैं। सर्वर जांचता है कि app.js.gz फ़ाइल उदा। अनुरोध किया गया /statics/app.js मौजूद है और इसे पारदर्शी रूप से कार्य करता है। अपने आवेदन को बदलने या Accept-Encoding का पता लगाने की कोई आवश्यकता नहीं है - जो कि nginx मॉड्यूल द्वारा संभाला जाता है। यहाँ config टुकड़ा है:

location /statics/ { 
    gzip_static on; 
} 

Answer 3

मैं इस सूत्र के लिए देर से एक छोटे से हूँ, लेकिन सोचा था कि मैं अपने 2c जोड़ना होगा। मैंने वेबपैक का उपयोग करके एक जीजी फ़ाइल जेनरेट की, लेकिन अपाचे ने Accept-Encoding सही तरीके से सेट किए जाने के बावजूद असंपीड़ित एक (या अगर यह मौजूद नहीं था) की सेवा करना जारी रखा। बाहर निकलता है मुझे AddEncoding x-gzip .gz .tgz को अपूर्ण करना पड़ा और httpd को पुनः लोड करना पड़ा। रिकॉर्ड के लिए, AddType application/x-gzip .gz .tgz पहले ही सेट हो चुका था, और मैं क्रोम 62 के साथ अपाचे 2.4.6 का उपयोग कर रहा हूं। मेरे conf/httpd.conf फ़ाइल को देखने के लिए मुझे दिमित करने के लिए उपरोक्त दिमित्री के लिए धन्यवाद।