希望在Heroku上使用以下构建包部署create-react-app
配置:https://github.com/mars/create-react-app-buildpack
我发现我的构建大小较大,经过gZipped后为425 kb,我的网站在初始加载时非常缓慢
以下步骤是否足以降低捆绑包大小?(即最好的预防措施)。如果不是,你会推荐什么?- 我还没有这样做:
- 在可以的地方进行代码拆分并使用React Loadable(也许使用 react-universal-component)
- 确保只加载所需的模块(例如:
import { map } from 'lodash/map';
)。
其他我不愿意做的解决方案
- 使用Preact因为我不想破坏现有功能 :)
- 两种快速减小生产中React应用程序大小的方法 - 看起来需要弹出,我想知道它是否值得?
它添加了以下内容:
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