NodeJS 来自package.json的所有包是否都包含在React构建版本中?

lnxxn5zx  于 2023-02-15  发布在  Node.js
关注(0)|答案(3)|浏览(151)

我创建了一个React应用程序,服务器端和客户端共享相同的package.json

├───build
│   └───static
│       ├───css
│       ├───js
│       └───media
├───server (backend code)
├───src (client code)
├───package.json (shared)

我的问题很简单,来自package.json的所有包都包含在最终的生产React构建中吗?
例如,我使用express作为服务器,它包含在React构建中吗?
如果是这样,有什么方法可以避免吗?或者我选择了一个错误的体系结构?
编辑:
im使用create-react-app,默认模式

aurhwmvo

aurhwmvo1#

否 *(一般情况下)。
最流行的react构建工具使用webpack(或其他做类似事情的捆绑包). Webpack接收一些“入口点文件路径”,从那些入口点抓取依赖项.然后webpack将所有内容打包成一个输出文件(或一组文件,取决于设置)。
如果您没有从任何前端文件导入express,它就不会进入bundle。

20jt8wwn

20jt8wwn2#

我不确定是否要为您的Express和React应用程序合并package.json,我看不出这样做有什么好处,因为React使用Webpack,合并Express服务器可能会打乱一些默认设置,我将与您分享我是如何做到这一点的。
在开发构建中,您将有2个独立运行的应用程序,create-react-app和node/express服务器将彼此独立运行,它们将有自己独立的package.json。
但是在生产环境中,您将在React应用上运行npm run build,它将作为express服务器上的静态文件提供。
我已经实现了这两种方案,您可以在此处查看
开发构建版本:https://github.com/iqbal125/react_hooks_fullstack_skeleton
生产构建:https://github.com/iqbal125/react-prod9

tkclm6bt

tkclm6bt3#

Previously answered,根据Webpack文档,Webpack从entry point开始生成一个dependency graph,通常是index.js.另外,如果你使用像create-react-app这样的东西,它会生成一个包json,如下所示:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "build": "react-scripts build",
  },

您可以看到没有devDependencies!这意味着并非您刚刚放在dependencies上的所有内容都将包含在您的最终构建中。
最后,我已经测试了一个新的CRA我的应用程序:
1.在已安装的裸计算机上按npm run build

File sizes after gzip:

  46.61 kB  build\static\js\main.46f5c8f5.js
  1.78 kB   build\static\js\787.28cb0dcd.chunk.js
  541 B     build\static\css\main.073c9b0a.css

1.通过npm i axios安装axios,但从未导入。运行npm run build后的输出:

File sizes after gzip:

  46.61 kB  build\static\js\main.46f5c8f5.js
  1.78 kB   build\static\js\787.28cb0dcd.chunk.js
  541 B     build\static\css\main.073c9b0a.css

什么都没有改变!
1.从"axios"中导入axios,但不要在代码中使用它:

import axios from "axios";
export default function App() {
  return (
    <div className="App">
    </div>
  );
}

以下是输出:

[eslint]
src\App.js
  Line 3:8:  'axios' is defined but never used  no-unused-vars

File sizes after gzip:

  46.61 kB  build\static\js\main.46f5c8f5.js
  1.78 kB   build\static\js\787.28cb0dcd.chunk.js
  541 B     build\static\css\main.073c9b0a.css

同样没有任何变化!但是你也可以看到eslint警告!
1.使用其函数之一,例如get method only:

import axios from "axios";
export default function App() {
  console.log(axios.get);
  return (
    <div className="App">
    </div>
  );
}

输出:

File sizes after gzip:

  57.92 kB (+11.31 kB)  build\static\js\main.4c83ea39.js
  1.78 kB               build\static\js\787.28cb0dcd.chunk.js
  541 B                 build\static\css\main.073c9b0a.css
    • 结论**:

如果我们不在应用中使用软件包,它就不会进入最终构建版本。

    • 注:**

虽然额外的包不会影响生产,但不要忘记不时地卸载未使用的包。运行npm install仍然会安装package.json中定义的每个包,无论它们是否被使用。因此,加载未使用的包会减慢部署速度,并影响您的队友(他们也需要运行npm install!!)。
Reference

相关问题