希望使用以下构建包在 Heroku 上部署 create-react-app
配置:https://github.com/mars/create-react-app-buildpack
我注意到经过 gZipped 后,我的构建大小为 425 kb,并且我的网站在初始加载时非常慢
以下步骤是否足以减少 bundle 的大小? (即最好的降压预防措施)。如果没有,您还有什么建议? - 我还没有这样做:
- 代码分割,我可以使用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(),//重复数据删除类似代码
new webpack.optimize.UglifyJsPlugin(),//缩小所有内容
new webpack.optimize.AggressiveMergingPlugin()//合并 block
构建时间 Gzip
- 我认为这已经由 create-react-app
我的源 map 浏览器 - 将再次尝试关闭 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
最佳答案
仅使用您需要使用的软件包。如果您的软件包很大,请仅包含您需要的模块:
导入“firebase/auth”; 导入“firebase/firestore”; 从 'lodash.isequal' 导入 isEqual;
使用类似
Gatsby.js
的东西来为您处理代码分割!利用
code splitting
与next.js
、react-loadable
或其他实践。使用服务器端渲染解决方案
关于reactjs - 大型 Create-React-App bundle 大小 - 优化的生产构建,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50111079/