Webpack: дублированный контент найден в файле с несколькими записями - PullRequest
Новая
       8

Webpack: дублированный контент найден в файле с несколькими записями

1 голос
/ 20 апреля 2020

Глобальный файл 

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

Webpack Config 

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 '}

Я могу получить несколько файлов в папке сборки. Но проблема в содержании Home. js находится в index. js и App. js. Поскольку все файлы связаны с индексом посредством импорта, а все файлы на страницах связаны с приложением. js.

Я хочу, чтобы я не хотел дублировать копии, но все пакеты связаны друг с другом через Импортировать. Может быть, вы можете сказать, что это разделение кода.

Ответы [ 2 ]

2 голосов
/ 02 мая 2020

Файл глобуса 

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

Webpack Config 

const browserConfig = {
  entry: entryObject,

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

Это сохранит структуру, которую вы хотите, и не будет иметь дублирующихся данных. Вместо этого это создаст другой файл, который будет совместно использоваться несколькими файлами. Таким образом, вы можете избежать дублирования кода и обеспечить более быструю загрузку пакетов. Бонус, если общий файл загружен любым вашим файлом, в следующий раз другой пакет, который зависит от общего файла, будет просто использовать кэшированный файл браузера. Это делает ваш код очень эффективным с размером пакета и по сети.

И да, это возможно в следующем js.

1 голос
/ 26 апреля 2020

SplitChunksPlugin может помочь для дедупликации кода 

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

, и вы можете использовать приведенный ниже подход для динамического c импорта и связывания библиотек 

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

, но этого недостаточно c лучшие практики, необходимые для React. Я предлагаю вам взглянуть на простые учебники, такие как This

...