Как заставить treehaking работать для файла, который экспортирует несколько реагирующих компонентов? - PullRequest
0 голосов
/ 23 апреля 2019

У меня есть файл, в который я экспортирую несколько констант с массивами детей, который называется icons.js.

В другом файле реакции давайте назовем его CloseButton.js. Я только импортирую

import { cross } from './icons.js';

и когда я запускаю веб-пакет с включенным производственным режимом, все остальные значки также отображаются импортированными (экспорт констант icon.js составляет около 100 КБ или около того, но одна строка не должна превышать 1 КБ) в передал CloseButton.js.

Я использую веб-пакет 4.30.0 с @ babel / preset-env и @ babel / preset-реакции.

webpack.config.js

const config = {
  entry: './CloseButton.js',
  output: {
    filename: 'CloseButton.js',
  },
  plugins: [],
  module: {
    rules: [
      {
        test: /\.js/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              modules: false
            }], '@babel/preset-react']
          }
        }
      }
    ]
  },
  mode: 'production'
};

module.exports = config;

Я протестировал запуск той же установки, но экспортировал только строки из icons.js, а затем код правильно исключал мертвый код.

Кто-нибудь знает, есть ли способ экспортировать только «крестик» из файла icons.js, не создавая отдельный файл для каждого реагирующего компонента, определенного в icons.js?

Я протестировал удаление всех ссылок на const s, экспортируемых как компоненты React, из icons.js, и это работает, но это не позволяет мне экспортировать значки.

1 Ответ

0 голосов
/ 24 апреля 2019

Я выяснил проблему, в основном я устанавливал компоненты реакции непосредственно на export const myicon = [<path></path>, <path />]; Вместо этого он, конечно, должен быть заключен в вызов функции.

, например: `` `export const myicon = () => {

return ([,])}` ``

...