编辑依赖库（节点模块）时，React Boilerplate 的 HMR 非常慢答案

【问题标题】：React Boilerplate's HMR very slow when editing dependency library (node module)编辑依赖库（节点模块）时，React Boilerplate 的 HMR 非常慢
【发布时间】：2018-08-15 10:19:14
【问题描述】：

我正在使用React Boilerplate，它在开发环境中利用 HMR（热模块重载）。

但是，我还有一个自定义组件库，我将其作为依赖项加载。它有大约 20 个 React 组件左右。该库是一个 UMD 模块，我通过样板文件中的 package.json 作为依赖项加载它。它也是由 Webpack 构建的，构建它大约需要 2 秒。

虽然在本地处理这两个项目时，我在我的样板项目中链接了库（使用“npm 链接”），所以我可以看到最近的更改。

现在，每当我对该依赖库中的任何位置进行更改时，HMR 都会启动样板项目，这很棒。但即使是最简单的更改，例如 CSS 颜色，也需要 HMR 大约 20 秒（！！！）在样板项目中重建 webpack。

每次重新构建依赖项时都会发生这种情况，因此在我进行微小更改时 20 秒是非常有害的。

谁能告诉我如何减少这个时间？我觉得我错过了什么。我正在为样板文件运行默认的 webpack 配置，因为它是开箱即用的。

依赖项的 webpack 配置与样板文件非常相似，但输出不同：

  output: {
    path: __dirname + '/dist',
    filename: 'index.js',
    library: 'my-component-library',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },

babel 和样式加载器几乎相同。

感谢大家提出的任何建议。

【问题讨论】：

标签： reactjs performance webpack webpack-hmr react-boilerplate

【解决方案1】：

为了回答我自己的问题，我这样做了：

https://github.com/uber/react-map-gl/issues/165#issuecomment-275412920

internals/webpack/webpack.base.babel.js

@@ @@
    loaders: [{
      test: /\.js$/, // Transform all .js files required somewhere with Babel
      loader: 'babel-loader',
-      exclude: /node_modules/,
+      include: [
+        path.resolve(process.cwd(), 'app'),
+        path.resolve(process.cwd(), 'node_modules/mapbox-gl/js'),
+      ],
      query: options.babelQuery,
@@ @@
  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
+    alias: {
+      'mapbox-gl$': path.join(__dirname, '../../node_modules/mapbox-gl/dist/mapbox-gl.js'),
+    },
},

package.json

    "env": {
      "production": {
-        "only": [
-          "app"
-        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },

【讨论】：