希望部署
create-react-app
在Heroku上使用以下构建包进行配置:
https://github.com/mars/create-react-app-buildpack
我注意到我的体型更大
425 kb
在被gZipped和我的
网站在初始加载时速度非常慢
以下步骤是否足以减少捆绑包大小?(即,最好的巴克预制)。如果没有,你还会推荐什么?
-
我还没有这样做:
-
在我可以使用的地方进行代码拆分
React Loadable
(可能使用
react-universal-component
)
-
确保我只加载所需的模块(即。
import { map } from 'lodash/map';
)。
我不愿意做的其他解决方案
即增加以下内容:
new webpack.optimize.DedupePlugin(), //dedupe similar code
new webpack.optimize.UglifyJsPlugin(), //minify everything
new webpack.optimize.AggressiveMergingPlugin()//Merge chunks
Build time Gzip
-我想已经完成了
创建react应用程序
我的源地图管理器
-再次尝试拆除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
