大型 Create-React-App 捆绑包大小 - 优化的生产构建

Question

希望使用以下构建包在 Heroku 上部署 create-react-app 配置：https://github.com/mars/create-react-app-buildpack

我注意到在 gZip 压缩后我的构建大小更大 425 kb 并且我的 网站在初始加载时真的很慢

以下步骤是否足以减小捆绑包大小？（即降压预测的最佳效果）。如果没有，您还会推荐什么？ - 我还没有这样做：

代码拆分我可以和使用 React Loadable （也许使用 react-universal-component)
确保我只加载所需的模块（即 import { map } from 'lodash/map';）。

其他我不愿意做的解决方案

使用 Preact 因为我不想破坏东西:)
Two Quick Ways To Reduce React App’s Size In Production - 看起来这需要弹出，我很好奇这是否值得？

即增加了以下内容：

new webpack.optimize.DedupePlugin(), //dedupe similar code new webpack.optimize.UglifyJsPlugin(), //minify everything new webpack.optimize.AggressiveMergingPlugin()//Merge chunks

Build time Gzip - 我认为 create-react-app

已经完成了

My Source Map Explorer - 再次尝试关闭 Firebase，删除 Lottie，并仅导入必要的模块

Heroku 构建日志

-----> React.js (create-react-app) multi app detected
-----> Configure create-react-app build environment
       Using `NODE_ENV=development`
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=false
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.11.1...
       Using default npm version: 5.6.0
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)
       up to date in 14.708s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       Skipping because NPM_CONFIG_PRODUCTION is 'false'
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
       Using existing `static.json`
       Enabling runtime environment variables
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
       Using existing `static.json`
       Enabling runtime environment variables
> journey-client@0.1.0 build /tmp/build_127125dc8ce0d7d71d8f78fe226cf544
> npm run build-css && react-scripts build
> journey-client@0.1.0 build-css /tmp/build_127125dc8ce0d7d71d8f78fe226cf544
> node-sass-chokidar src/ -o src/
Wrote 2 CSS files to /tmp/build_127125dc8ce0d7d71d8f78fe226cf544/src/
Creating an optimized production build...
File sizes after gzip:
  495.27 KB  build/static/js/main.b1129bd4.js
  18.05 KB   build/static/css/main.e2b6d04c.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
  "homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
  npm install -g serve
  serve -s build
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
-----> Installed directory to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 92.5M
-----> Launching...
       Released v94

Answer 1

仅使用您必须使用的软件包。如果您的包很大，请只包含您需要的模块：

进口'firebase/auth'；导入 'firebase/firestore'；从 'lodash.isequal';
使用类似 Gatsby.js 的东西来为您处理代码拆分！
利用 code splitting 和 next.js、react-loadable 或其他做法。
使用服务器端渲染解决方案

Answer 2

我最近遇到了同样的问题，我不想弹出我的旧 CRA 项目。我做了以下步骤： 1. 将你的 React ad React-DOM 更新到最新版本（在我的例子中是 16.8.6）- 运行 'yarn react@next react-dom@next'（或者 npm 命令，如果使用 npm） 2. 使用 React.lazy 和 React.Suspense 方法来按需延迟加载库和/或组件这里是 link https://reactjs.org/blog/2018/10/23/react-v-16-6.html

就是这样，但是如果您在使用 'import' 语法时遇到错误，则需要使用 babel-plugin-syntax-dynamic-import 插件。

您获得了最新的 React 版本并有望减小包的大小 - 希望这对您有所帮助

Answer 3

这就是大型项目的 create-react-app 的问题。我会建议您手动设置 React 项目，并且确实需要对开发和生产环境进行配置更改。有很多资源可以帮助配置 web-pack，从而有助于减少项目的包大小。这是其中之一的示例。

Two Quick Ways To Reduce React App’s Size In Production

大型 Create-React-App 捆绑包大小 - 优化的生产构建

Large Create-React-App Bundle Size - Optimized Production Build

heroku

reactjs

webpack

create-react-app