reactjs – 大型创建 – 反应 – 应用程序包大小 – 优化生产构

我注意到在gzip压缩后我的构建大小为425 kb,我的网站在初始加载时速度很慢

以下步骤是否有足够的措施来减少束的大小？ (即降压预制的最佳效果).如果没有,你会推荐什么？ – 我还没有这样做：

>代码拆分我可以使用React Loadable(也许使用
react-universal-component)
>确保我只加载所需的模块(即从’lodash / map’中导入{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()//合并块

构建时间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