我使用create-react-app创建了一个React应用程序。我想在构建过程中压缩文件。
我希望文件能够被gzip压缩。
我使用create-react-app创建了一个React应用程序。我想在构建过程中压缩文件。
我希望文件能够被gzip压缩。
您可以运行任何后构建命令,就像JackHack所演示的那样。但我还想添加以下选项以删除“.gz”扩展名,以便继续使用原始文件名:
"scripts": {
...
"build": "react-scripts build",
"postbuild": "find /path/to/build/static -type f \\( -name \\*.js -o -name \\*.css \\) -exec gzip {} \\; -exec mv {}.gz {} \\;"
},
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 0;
gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;
那么你的最终配置可能如下:
server {
listen 8080;
server_name nginx.test.com;
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 0;
gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;
location / {
root /data/www;
}
}
最简单的方法可能是修改您的package.json文件。
在scripts中添加"postbuild"部分。例如,以下内容:
"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "tar -cvzf your_react_app_name.tar.gz /path/to/your/build/artifacts"
}
构建后处理应在构建运行后自动运行。 如果您没有tar:
"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "cd /path/to/your/build && gzip *.js && gzip *.css"
}
"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "zip -r your_app.zip /path/to/your/build"
}
Windows PowerShell:
"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "Compress-Archive -Path C:\path\to\your\build\* -CompressionLevel Optimal -DestinationPath C:\export\path\your_app_name.zip"
}
试试这个。对我有效,希望对你也有用。
"postbuild": "gzip build/static/js/*.js && gzip build/static/css/*.css"
注意:create-react-app项目不太可能将此功能添加为构建配置,因为他们已经拒绝了各种尝试/请求来内部支持它(例如,问题#1908和#3169)。听起来他们希望使用后构建脚本或服务器来处理压缩。
location / {
...
...
if ( $uri ~* "static/.*.(css|js)$" ) {
add_header Content-Encoding gzip;
}
}