我从我们的项目 vendor 和 app 中制作了两个 javascript 包。我按照 documentation 建议的方式执行此操作，如我的 brunch-config.js 中的这段代码所示:

files: {
  javascripts: {
    joinTo: {
      'js/vendor.js': /^(?!source\/)/,
      'js/app.js': /^source\//
    },
    entryPoints: {
      'source/scripts/app.jsx': 'js/app.js'
    }
  }
}

最后我得到了一个 vendor.js 和一个 app.js。但是检查文件大小:

请注意 app.js 比 vendor.js 大!这个大尺寸使观看速度比需要的慢。检查 app.js 的内容后，它似乎包含 lodash、React 和其他库，我希望它能从 vendor.js 中获取。 vendor.js 似乎包含相同的库，这正是我所期望的。

我的问题:为什么库会出现在 app.js 中？为什么 app.js 不从 vendor.js 引用它们？

我可能遗漏了一些配置。这是供您检查的完整 brunch-config.js:

module.exports = {

  files: {
    javascripts: {
      joinTo: {
        'js/vendor.js': /^(?!source\/)/,
        'js/app.js': /^source\//
      },
      entryPoints: {
        'source/scripts/app.jsx': 'js/app.js'
      }
    },
    stylesheets: {joinTo: 'css/core.css'},
  },

  paths: {
    watched: ['source']
  },

  modules: {
    autoRequire: {
      'js/app.js': ['source/scripts/app']
    }
  },

  plugins: {
    babel: {presets: ['latest', 'react']},
    assetsmanager: {
      copyTo: {
        'assets': ['source/resources/*']
      }
    },
    static: {
      processors: [
        require('html-brunch-static')({
          processors: [
            require('pug-brunch-static')({
              fileMatch: 'source/views/home.pug',
              fileTransform: (filename) => {
                filename = filename.replace(/\.pug$/, '.html');
                filename = filename.replace('views/', '');
                return filename;
              }
            })
          ]
        })
      ]
    }
  },

  server: {
    run: true,
    port: 9005
  }

};

在 HTML 中，我需要这样的文件:

<script type="text/javascript" src="js/vendor.js" defer></script>
<script type="text/javascript" src="js/app.js" defer></script>

我尝试设置订单对象，但无济于事:

files:
  javascripts: {
    joinTo: {
      'js/vendor.js': /^(?!source\/)/,
      'js/app.js': /^source\//
    },
    entryPoints: {
      'source/scripts/app.jsx': 'js/app.js'
    },
    order: {
      before: /^(?!source)/,
      after: /^source\//
    }
  }
}

这是我的 package.json:

{
  "version": "0.0.1",
  "devDependencies": {
    "assetsmanager-brunch": "^1.8.1",
    "babel-brunch": "^6.1.1",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-rewire": "^1.0.0-rc-5",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-preset-react": "^6.3.13",
    "babel-register": "^6.11.6",
    "browser-sync-brunch": "^0.0.9",
    "brunch": "^2.10.9",
    "brunch-static": "^1.2.1",
    "chai": "^3.5.0",
    "es6-promise": "^3.2.1",
    "eslint-plugin-react": "^5.1.1",
    "expect": "^1.20.2",
    "html-brunch-static": "^1.3.2",
    "jquery": "~2.1.4",
    "jquery-mousewheel": "^3.1.13",
    "mocha": "^3.0.0",
    "nib": "^1.1.0",
    "nock": "^8.0.0",
    "oboe": "~2.1.2",
    "paper": "0.9.25",
    "path": "^0.12.7",
    "pug": "^2.0.0-beta10",
    "pug-brunch-static": "^2.0.1",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-mock-store": "^1.1.2",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "reselect": "^2.5.3",
    "spectrum-colorpicker": "~1.8.0",
    "stylus-brunch": "^2.10.0",
    "uglify-js-brunch": "^2.10.0",
    "unibabel": "~2.1.0",
    "when": "~3.4.5"
  },
  "dependencies": {
    "jwt-decode": "^2.1.0",
    "lodash": "^4.17.4",
    "postal": "^2.0.5",
    "rc-tree": "^1.3.9"
  },
  "scripts": {
    "test": "mocha --compilers js:babel-register"
  }
}

另一个想法，这可能与使用 require 而不是 import 有关吗？

如果我可以提供任何其他有用的信息，请告诉我。感谢您的帮助。

更新

这是我的文件夹结构，经过简化:

node_modules
source
|---resources
|---scripts
|---styles
|---views

这是 brunch build 生成的输出结构:

assets
css
|---core.css
js
|---app.js
|---app.js.map
|---vendor.js
|---vendor.js.map
home.html

自己调试吧!可用的 MVCE。请按照以下说明操作:

1. 克隆这个example repository
2. npm 安装
3. brunch build(确保使用 npm install brunch -g 全局安装它)
4. 比较public/js 中app.js 和vendor.js 的大小。它们应该分别为 744 KB 和 737 KB。检查 app.js 的内容并记下库内容。我的 files.javascripts.joinTo['js/app.js'] 如何将其包含在正则表达式 /^source\// 中？

最佳答案

问题是由joinTo 和entryPoints 混合引起的。我假设使用您的配置，您首先将代码拆分为 app.js 和 vendor.js 但随后 app.js 被覆盖entryPoints 的输出。

为了解决它，您必须选择以下选项之一:

选项 1

删除 entryPoints 声明。这只会按照提供的 RegEx 拆分您的代码。

选项 2

删除 joinTo 声明并将 entryPoints 更改为:

    entryPoints: {
      'source/scripts/app.jsx': {
        'js/vendor.js': /^(?!source\/)/,
        'js/app.js': /^source\//
      },
    }

结论

在这种情况下，两个选项的输出是相同的。但是使用 entryPoints 代码得到分析，只有需要的模块被捆绑。因为没有任何不必要的模块，所以大小是一样的。参见 this issue获取更多信息。

关于javascript - Brunch:分离 vendor 和应用程序 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43726576/