Webpack：在多个条目文件中发现重复内容答案

【问题标题】：Webpack: Duplicate content found in multiple entry fileWebpack：在多个条目文件中发现重复内容
【发布时间】：2020-04-20 06:10:02
【问题描述】：

全局文件

const entryArray = glob.sync('src/**/*.js');
const entryObject = entryArray.reduce((acc, item) => {
  const name = item
  acc[name] = "./"+item;
  return acc;
}, {});

Webpack 配置

const browserConfig = {
  entry: entryObject,

  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name]",
    publicPath: "/"
  },
}

{ 'src/App.js': './src/App.js', 'src/App.test.js': './src/App.test.js', 'src/index.js': './src/index.js',
'src/page/About.js': './src/page/About.js', 'src/page/Home.js': './src/page/Home.js', 'src/serviceWorker.js': './src/serviceWorker.js', 'src/setupTests.js': './src/setupTests.js' }

我可以在 build 文件夹中获取多个文件。但问题是 Home.js 的内容是在 index.js 和 App.js 中找到的。由于所有文件都通过导入链接到索引，并且页面中的所有文件都链接到 App.js。

我想要的是我不想要重复的副本，但所有捆绑包都通过导入相互链接。也许你可以说它是代码拆分。

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

全局文件

const entryArray = glob.sync('src/**/*.js');
const entryObject = entryArray.reduce((acc, item) => {
  const name = item
  acc[name] = "./"+item;
  return acc;
}, {});

Webpack 配置

const browserConfig = {
  entry: entryObject,

  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name]",
    publicPath: "/"
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
}

这将保留您想要的结构，并且没有重复数据。相反，这将创建另一个文件，该文件将在多个文件之间内部共享。通过这种方式，您可以避免代码重复并确保您的包加载速度更快。一旦共享文件被您的任何文件加载，下次依赖共享文件的另一个包将只使用浏览器缓存文件。这使得您的代码在捆绑大小和网络上都非常高效。

是的，这在 nextjs 中是可能的。

【讨论】：

还是不行！看来我必须使用动态导入，否则我必须创建一个 webpack 插件来实现这一点。

【解决方案2】：

SplitChunksPlugin 可能有助于代码去重

module.exports = {
    ...
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'build'),
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  };

您可以使用以下方法进行动态导入和链接库

  module.exports = {
    entry: {
      index: './src/index.js'
    },
    output: {
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      publicPath: 'build/',
      path: path.resolve(__dirname, 'build'),
    }
  };

但这缺乏 React 所需的非常基本的最佳实践。我建议你看看像This这样的简单教程

【讨论】：