react中的webpack构建和npm运行构建之间的区别

Question

我是react编程的新手。我完成了我的项目，我正在努力了解构建优化技术。我的应用程序包含图形、ant、redux库。在完成我的项目后，我执行了npm运行构建和npm运行分析，捆绑包的组合大小显示为3MB。我使用webpack在互联网上搜索，我们可以缩小构建的大小，然后我将webpack.config.js添加到我的项目中，我执行了webpack--mode=production，bundle.js大小显示为5MB。我不知道该用哪种方法。

webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const withReport = process.env.npm_config_withReport
module.exports = {
// webpack will take the files from ./src/index
entry: './src/index',
// and output it into /dist as bundle.js
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/'
},
devServer: {
contentBase: path.join(__dirname, 'output'),
compress: true,
port: 3000,
historyApiFallback: true,
publicPath: '/'
},
// adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
// we use babel-loader to load our jsx and tsx files
{
test: /.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
},
// css-loader to bundle all the css files into one file and style-loader to add all the styles  inside the style tag of the document
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ico)$/,
exclude: /node_modules/,
loader: "file-loader"
},
{
test: /.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
},plugins: [
new HtmlWebpackPlugin({
template: path.resolve( __dirname, 'public/index.html' ),
filename: 'index.html',
favicon: "./public/appicon.png",
manifest: "./public/manifest.json"
}),
withReport ? new BundleAnalyzerPlugin() : '',
],
optimization: {
usedExports: true
}
};

npm运行构建===>第一种方法==>。300万"build"："webpack--模式=生产"===>第二种方法==>520万

Answer 1

安装gzipper包(https://www.npmjs.com/package/gzipper)。像这样修改构建命令

"build": "react-scripts build && gzipper compress --verbose ./build"

在构建项目时，您将获得gzip和常规文件。这取决于您使服务器提供gzip而不是常规文件。如果你正在使用nginx，你必须在nginx.conf文件中设置你的服务器，如下所示

server {
# Gzip Settings
gzip on;
gzip_static on; # allows pre-serving of .gz file if it exists 
gzip_disable "msie6"; # Disable for user-agent Internet explorer 6. Not supported.
gzip_proxied any; # enable gzip for all proxied requests
gzip_buffers 16 8k; # number and size of buffers to compress a response
gzip_http_version 1.1;
gzip_min_length 256; # Only gzip files of size in bytes
gzip_types text/plain text/css text/html application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
gunzip on; # Uncompress on the fly
listen       4000;
server_name  localhost;

location / {
root   html/react-app;
index  index.html index.htm;
}

error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   html;
}

}

或者您可以使用compress-create-react应用程序以最小配置将构建后压缩添加到您的create-react应用程序构建中。它使用brotli和gzip算法压缩构建文件夹中的所有html、css和javascript文件。

首先将其作为开发依赖项安装：

npm install compress-create-react-app --save-dev

然后在包.json:中编辑build命令

"scripts": {
"start": "react-scripts start",
-   "build": "react-scripts build",
+   "build": "react-scripts build && compress-cra",
"test": "react-scripts test",
"eject": "react-scripts eject"
}