Webpack:拆分供应商和应用程序代码

Webpack: split vendor and app code

本文关键字：应用程序 代码 供应商 拆分 Webpack      更新时间：2023-11-22

I设置React+Webpack项目。构建一个初始捆绑包需要60秒，添加增量更改需要1秒，但我甚至还没有应用程序代码！看起来node_modules的捆绑包非常昂贵。我尝试使用公共块进行拆分，但这并没有提高性能。

我怎么能只制作一次Webpack bundle node_modules，甚至不注意这个目录中的更改？

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

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

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

这个消息告诉webpack的是每次你需要（"react"）或者webpack会返回一个名为react的全局变量。如果你需要，也是一样的

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

以下是一个排除node_modules的示例：

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

或者更高性能的，你可以只包括你需要的文件：

{
  module: {
    loaders: [
      {
        test: /'.jsx?/,
        include: './src',
        loader: 'babel'
      }
    ]
  }
}
相关文章：