【发布时间】：2018-10-11 04:08:31
【问题描述】：
希望使用以下 buildpack 在 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
【问题讨论】：
-
有什么进展吗？我也很好奇。
-
@MathieuK。还没有。我认为这是“正常的”。我认为最佳做法是非常明智地选择包含哪些软件包。还要研究代码拆分。我不确定它在后端是如何工作的，但 WebPack 会自动将您的代码拆分为单独的模块。如果您可以在拆分的不同 React 类之间分离大包 -> 它们将根据需要加载到流中
标签： reactjs heroku webpack create-react-app