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

Question

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

我注意到在gzip压缩后我的构建大小为425 kb，我的网站在初始加载时速度很慢

以下步骤是否有足够的措施来减少束的大小？ （即降压预制的最佳效果）。如果没有，你会推荐什么？ - 我还没有这样做：

1. 代码拆分我可以使用React Loadable（也许使用react-universal-component）
2. 确保我只加载所需的模块（即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已经完成了这项工作

---

我的源地图浏览器 - 再一次，将尝试取消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
> [email protected] build /tmp/build_127125dc8ce0d7d71d8f78fe226cf544
> npm run build-css && react-scripts build
> [email protected] 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

1. 仅使用您需要使用的包。如果您有大尺寸的包装，只包括您需要的模块： import'firebase / auth';进口'firebase / firestore'; import isEqual from'lodash.isequal';
2. 使用像Gatsby.js这样的东西为你处理代码分裂！
3. 利用code splitting与next.js，react-loadable或其他的做法。
4. 使用服务器端呈现解决方案

Answer 2

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

这就是它，但如果你使用'import'语法遇到错误，你需要使用babel-plugin-syntax-dynamic-import插件。

你得到最新的反应版本，希望减少捆绑尺寸 - 我希望这对你有帮助