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

6

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

我发现我的构建大小较大,经过gZipped后为425 kb,我的网站在初始加载时非常缓慢

以下步骤是否足以降低捆绑包大小?(即最好的预防措施)。如果不是,你会推荐什么?- 我还没有这样做:

  1. 在可以的地方进行代码拆分并使用React Loadable(也许使用 react-universal-component
  2. 确保只加载所需的模块(例如:import { map } from 'lodash/map';)。

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

它添加了以下内容:

new webpack.optimize.DedupePlugin(), //去重相似代码 new webpack.optimize.UglifyJsPlugin(), //对所有内容进行压缩 new webpack.optimize.AggressiveMergingPlugin()//合并块

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
> 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

有进展吗?我也很好奇。 - Mathieu K.
@MathieuK。目前还没有任何进展。我认为这是“正常”的。我认为最佳实践是非常谨慎地选择要包含的软件包。另外,请研究代码拆分。我不确定它在后端如何工作,但WebPack会自动将您的代码拆分为单独的模块。如果您可以在不同的React类之间分离大型软件包->它们将按需加载。 - njho
3个回答

2
  1. 只使用必需的包。如果您有大型的包,请仅包含所需的模块:

    import 'firebase/auth'; import 'firebase/firestore'; import isEqual from 'lodash.isequal';

  2. 使用类似于 Gatsby.js 的工具,它会为您处理代码拆分!

  3. 使用像 next.jsreact-loadable 或其他类似的实践,进行代码拆分。

  4. 使用服务器端渲染解决方案。


1
这就是使用create-react-app进行大型项目开发的问题。建议您手动设置react项目,并对开发和生产环境进行必要的配置更改。有很多资源可以帮助配置web-pack,以减少项目的打包大小。以下是其中一个示例。

两种快速减小React应用程序在生产中的大小的方法


1

我最近也遇到了同样的问题,我不想弹出我的旧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插件。

你将得到最新的React版本,希望能减小打包体积 -- 希望这可以帮到你。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接