我刚安装并设置gzip压缩到我的webpack并表达文件。我的webpack.config.js的插件片段现在看起来像这样:
plugins: [
new webpack.DefinePlugin({ // <-- key to reducing React's size
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin(), //minify everything
new webpack.optimize.AggressiveMergingPlugin(),//Merge chunks
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
HTMLWebpackPluginConfig,
new Dotenv({
path: './.env', // Path to .env file (this is the default)
systemvars: true //
})]
};
我的server.js文件的片段现在看起来像这样:
// Use our router configuration when we call /
if (process.env.NODE_ENV === 'production') {
app.use(express.static('dist'), router);
app.get('/*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});
app.get('/*.js', (req, res) => {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
});
} else {
app.use('/', router);
}
当我将应用程序部署到生产环境时,我可以看到实际构建了两个文件的代码,index_bundle.js和index_bundle.js.gz:
remote: index_bundle.js 1.49 MB 0 [emitted] [big] main
remote: index_bundle.js.gz 375 kB [emitted] [big]
remote: index.html 3.88 kB [emitted]
压缩成功,但是,当我使用chrome控制台测试我的网站时,它仍然通过网络而不是新的压缩文件提供index_bundle.js文件:
有关潜在原因的任何想法?