如何使用樹形圖來處理導出多個反應組件的文件？

Question

我有一個文件，我正在導出多個帶有名為icons.js的子陣列的consts。

在另一個反應文件中，我們稱之為CloseButton.js。 我只是導入

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

當我在啟用生產模式的情況下運行webpack時，所有其他圖標似乎也被導入（icons.js const導出量接近100kB左右，但單行不應大於1kB）到已編譯的CloseButton。 JS。

我正在使用webpack 4.30.0和@ babel / preset-env以及@ babel / preset-react。

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中定義的每個反應組件創建單獨的文件？

我已經測試了從icons.js中刪除作為React組件導出的const的所有引用，這是有效的，但這不允許我導出圖標。

Answer 1

我想出了問題，基本上我是直接在export const myicon = [<path></path>, <path />];上設置react組件export const myicon = [<path></path>, <path />]; 相反，它當然需要用函數調用包裝。

例如：```export const myicon =（）=> {

return（[，]）}```