摇树不适用于 webpack 4 和 semantic-ui-react答案

【问题标题】：Tree shaking doesn't work with webpack 4 and semantic-ui-react摇树不适用于 webpack 4 和 semantic-ui-react
【发布时间】：2018-12-12 23:29:52
【问题描述】：

我只从 semantic-ui-react 导入一个组件

import { Button as SemanticButton} from 'semantic-ui-react';

但在运行webpack -p 之后，我看到捆绑包中的语义 UI 的所有组件，其大小超过 300KB（没有语义 UI 时约为 30KB）。我安装了所有最新版本：webpack@4.14.0；语义-ui-react@0.81.3

这是我的 webpack.config.js

module.exports = {
  entry: './src/index.js',
  resolve: {
    modules: [
      path.resolve('./'),
      'node_modules',
    ],
    extensions: ['*', '.js', '.jsx', '.css', '.less'],
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  externals: {
    react: {
      root: 'React',
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'React',
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'ReactDOM',
    },
    'prop-types': {
      root: 'PropTypes',
      commonjs: 'prop-types',
      commonjs2: 'prop-types',
      amd: 'PropTypes',
    },
  },
};

我做错了吗？如何使用语义 ui-react 使树抖动工作？我不想看到捆绑包中未使用的组件。

【问题讨论】：

如果您将 mode: "production" 添加到 Webpack 配置以进行生产，SemanticUI 中未使用的组件是否仍然存在？
是的，因为webpack -p 在生产模式下运行 webpack。我也尝试了mode: "production"，但没有成功。

标签： javascript reactjs webpack semantic-ui

【解决方案1】：

这个问题的解决方案变得相当简单。你只需要正确配置 Babel。

只需在你的 babel-preset-env 配置中指定 "modules": false 即可让 Babel 以我们想要的方式运行，这允许 webpack 分析你的依赖树并摆脱那些未使用的依赖。此外，此过程不会导致兼容性问题，因为 webpack 最终会将您的代码转换为广泛兼容的格式。

所以.babelrc 可以是这样的：

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ]
}

Source

【讨论】：