javascript - Webpack:拆分 vendor 和应用程序代码

Question

我设置了 React+Webpack 项目。构建初始包需要 60 秒，追加增量更改需要 1 秒，但我什至还没有我的应用程序代码!看来node_modules 的捆绑非常昂贵。我尝试使用公共(public) block 进行拆分，但并没有提高性能。

如何才能使 Webpack 捆绑 node_modules 一次，甚至不监视此目录中的更改？

Answer 1

如果这是一个问题，您不需要在项目中捆绑外部依赖项。您可以将它们添加为外部依赖项。当然，为此，您应该将脚本添加到您的页面中。

假设您将react和react-dom脚本添加到您的页面，您可以在webpack配置文件中添加以下内容:

{
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  } 
}

这告诉 webpack 的是每次你 require('react') 或 webpack 都会返回一个名为 React 的全局变量。如果您需要('react-dom')，同样的事情

对于每个加载程序，您应该包含所需的文件或排除不需要的文件。

这是一个不包括node_modules的示例:

{
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
}

或者甚至更高性能，您可以只包含您需要的文件:

{
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: './src',
        loader: 'babel'
      }
    ]
  }
}