Question

我正在尝试减少reactjs应用程序bundle.js文件的大小。对于一个相对简单的应用程序，我有其浏览器化的js文件大小 - 452Kb。

要构建它，我将NPM与各自的package.json文件一起使用：

   {
      "name": "MyApp-React",
      "version": "0.0.1",
      "description": "My App Description",
      "main": "app.js",
      "scripts": {
        "watch": "watchify app.js -o public/js/bundle.js -v",
        "browserify": "browserify app.js | uglifyjs > public/js/bundle.js",
        "build": "npm run browserify",
        "start": "npm install"
      },
      "author": "",
      "dependencies": {
        "axios": "^0.14.0",
        "body-parser": "^1.15.2",
        "clipboard": "^1.5.12",
        "express": "~4.9.7",
        "express-handlebars": "~1.1.0",
        "express-session": "^1.14.1",
        "highlight.js": "^9.7.0",
        "node-jsx": "~0.12.4",
        "react": "~15.3.1",
        "react-dom": "^15.3.1",
        "react-maskedinput": "^3.2.4",
        "react-modal": "^1.4.0",
        "react-router": "^2.8.1"
      },
      "devDependencies": {
        "browserify": "~6.0.3",
        "nodemon": "^1.2.1",
        "reactify": "~1.1.1",
        "uglify-js": "~2.4.15",
        "watchify": "^3.1.1"
      },
      "browserify": {
        "debug": false,
        "transform": [
          "reactify"
        ]
      }
    }

不是Node JS / ReactJS开发的专家，我希望我做错了，但我找不到。

暂时我尝试了一些事情：app.js文件有一行代码，将NODE_ENV变量设置为'production'

process.env.NODE_ENV = 'production';

我尝试的第二件事是使用带有--production参数的npm prune命令。有了这个运行，我看到它从node_modules文件夹中删除了很多，但是然后npm run build无法运行，因为它错过了devDependencies。我该怎么办？

Answer 1

为减轻用户的下载负担，您可以做的一件事是从CDN获取 react 和 react-dom ，而不是将它们放入您的捆绑包中。< / p>

将它们从 package.json 的依赖项部分移至新部分 peerDependencies （see npm docs）。

然后将标记添加到HTML代码中，以便像这样加载React和ReactDOM：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>

→请参阅React on cdnjs.com

然后，您需要更改Browserify配置，以识别 react 和 react-dom 作为外部模块。

→请参阅related question on StackOverflow

捆绑的ReactJS应用程序的大小

1 个答案: