未提供 Webpack gzip 压缩包,未压缩包是
Webpack gzip compressed bundle not being served, the uncompressed bundle is
我是第一次尝试 Webpack。我已经将 Gulp 与 Browserify 一起使用了一段时间,并且对它非常满意。在这一点上,我只是在测试几个 Webpack 插件。即 compression-webpack-plugin。我以前从未使用过压缩,所以如果我犯了任何菜鸟错误,请多多包涵。
下面是我的webpack.config.js。结果是我得到 main.js、main.js.gz、main.css 和 index.html。 main.js 被注入 index.html,但如果我在浏览器中打开 index.html,它会提供未压缩的 main.js,而不是压缩的 main.js.gz。我读过我不需要在我的脚本标签中包含 .gz 扩展名,并且 html-webpack-plugin 不包含它,所以我认为一切正常,但未压缩 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()
]
};
要在 script
标签中包含 main.js
的情况下加载 main.js.gz
而不是 main.js
,您需要配置 web-server(apache, nginx等)
请记住,配置应加载 .js.gz
或 .js
取决于浏览器是否接受 gzip。 Web-server 可以在 HTTP 请求头中查看 Accept-Encoding: gzip, deflate
在浏览器开发工具中,您将在任何情况下看到 main.js。
您可以使用 nginx gzip static module 轻松地有条件地提供 gz
静态信息。服务器检查 app.js.gz
文件是否为例如requested /statics/app.js
存在并透明地提供服务。无需更改您的应用程序或检测 Accept-Encoding
- 所有这些都由 nginx 模块处理。这是配置片段:
location /statics/ {
gzip_static on;
}
我来晚了一点,但我想我会添加我的 2c。我使用 webpack 生成了一个 gz 文件,但是尽管 Accept-Encoding
设置正确,Apache 仍然提供未压缩的文件(如果不存在则出错)。结果我不得不取消注释 AddEncoding x-gzip .gz .tgz
并重新加载 httpd。作为记录,AddType application/x-gzip .gz .tgz
已经设置,我正在使用 Apache 2.4.6 和 Chrome 62。感谢上面的 Dmitry 提醒我查看我的 conf/httpd.conf 文件。
我是第一次尝试 Webpack。我已经将 Gulp 与 Browserify 一起使用了一段时间,并且对它非常满意。在这一点上,我只是在测试几个 Webpack 插件。即 compression-webpack-plugin。我以前从未使用过压缩,所以如果我犯了任何菜鸟错误,请多多包涵。
下面是我的webpack.config.js。结果是我得到 main.js、main.js.gz、main.css 和 index.html。 main.js 被注入 index.html,但如果我在浏览器中打开 index.html,它会提供未压缩的 main.js,而不是压缩的 main.js.gz。我读过我不需要在我的脚本标签中包含 .gz 扩展名,并且 html-webpack-plugin 不包含它,所以我认为一切正常,但未压缩 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()
]
};
要在 script
标签中包含 main.js
的情况下加载 main.js.gz
而不是 main.js
,您需要配置 web-server(apache, nginx等)
请记住,配置应加载 .js.gz
或 .js
取决于浏览器是否接受 gzip。 Web-server 可以在 HTTP 请求头中查看 Accept-Encoding: gzip, deflate
在浏览器开发工具中,您将在任何情况下看到 main.js。
您可以使用 nginx gzip static module 轻松地有条件地提供 gz
静态信息。服务器检查 app.js.gz
文件是否为例如requested /statics/app.js
存在并透明地提供服务。无需更改您的应用程序或检测 Accept-Encoding
- 所有这些都由 nginx 模块处理。这是配置片段:
location /statics/ {
gzip_static on;
}
我来晚了一点,但我想我会添加我的 2c。我使用 webpack 生成了一个 gz 文件,但是尽管 Accept-Encoding
设置正确,Apache 仍然提供未压缩的文件(如果不存在则出错)。结果我不得不取消注释 AddEncoding x-gzip .gz .tgz
并重新加载 httpd。作为记录,AddType application/x-gzip .gz .tgz
已经设置,我正在使用 Apache 2.4.6 和 Chrome 62。感谢上面的 Dmitry 提醒我查看我的 conf/httpd.conf 文件。