使用插件压缩 Webpack 打包文件

Question

使用插件压缩 Webpack 打包文件

5

我将翻译如下：

我正在尝试使用CompressionPlugin压缩webpack包。以下是我的webpack设置：

webpack

const path = require('path');
const webpack = require('webpack');

const CompressionPlugin = require("compression-webpack-plugin")


module.exports = {
entry: ['babel-polyfill', './src/client.js'],
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'public')
},

plugins: [
    new webpack.DefinePlugin({ 
        'process.env': {
        'NODE_ENV': JSON.stringify('production'),

        }
    }),
    new webpack.optimize.UglifyJsPlugin({
                output: {
                    comments: false,
                    beautify: false,
                },
                compress: {
                    screw_ie8: true,
                    warnings: false
                    }
                }),
    new webpack.optimize.AggressiveMergingPlugin(),
    new CompressionPlugin({   
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
    })
],
watch: true,
module:{
    loaders:[
        {
            test:/\.js$/,
            exclude:/node_modules/,
            loader: 'babel-loader',
            query:{
                presets: ['react','es2015','stage-1'],
            },
        },
    ],
},
};

www

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);


var server = http.createServer(app);

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

index.ejs

<body>
    <DIV id="app"><%- reactComponent -%></DIV>
    <script>window.INITIAL_STATE=<%- initialState -%></script>
    <SCRIPT src="/bundle.js"></SCRIPT>
</body>
</html>

我得到了以下捆绑输出：

一切似乎都正常，但我不确定我是否以正确的方式进行了操作，我不确定它是否实际上配置为使用bundle.js.gz。

- publicArt33

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bamse · Accepted Answer

当浏览器请求到达服务器时，必须启用gzip编码：请求头必须包含以下内容：Accept-Encoding: gzip, deflate, br所有浏览器都支持，但旧浏览器可能没有。您不需要添加任何额外的script标签来使其工作。您引用js文件即可。

您正在使用不知道如何处理gzip文件的node http服务器提供文件，除非直接访问。在处理可以处理gzip的请求时，服务器应该检查所请求的文件是否也有其归档版本，并将其替换为归档版本。

我还没有测试这个实现，但它似乎做了你需要的事情：您需要调整您的node服务器。

在使用nginx或Apache提供文件时，启用gzip是一个设置。

希望它能帮到你。