1.添加webpack-bundle-analyzer插件，分析打包文件大小

1.npm install --save-dev webpack-bundle-analyzer

项目是采用react-app-rewired 和 customize-cra  配置webpack相关配置

 customize-cra文档   customize-cra/api.md at master · arackaf/customize-cra · GitHub

根目录配置文件: config-overrides.js

const { override, addWebpackAlias, addLessLoader, addDecoratorsLegacy, addWebpackPlugin, DefinePlugin } = require('customize-cra');
const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
function resolve (dir) {
    return path.join(__dirname, '.', dir)
}
 
module.exports = override(
    addWebpackAlias({
        '@': resolve('src')
    }),
    addLessLoader({
        modifyVars: {
            'text-color': 'rgba(0, 0, 0, .9)',
        },
        javascriptEnabled: true,
    }),
    addDecoratorsLegacy(),
    // 添加分析工具
    addWebpackPlugin(new BundleAnalyzerPlugin())
);

2. npm run build  构建项目

自动启动分析页面 http://127.0.0.1:8888/

2.nginx开启gzip

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types application/json text/plain application/x-javascript text/css application/xml application/javascript;
    gzip_vary on;

3.将打包项目放置nginx  html目录

location / {
            root    html/build; #打包后的文件
            index  index.html index.htm;
            try_files $uri /index.html;
}

直接启动前端项目包体积较大， 采用build打包后再nginx启动测试