在打包的包 ReactJS 中仅包含使用过的导入答案

【问题标题】：Include only used imports in the packaged bundle ReactJS在打包的包 ReactJS 中仅包含使用过的导入
【发布时间】：2018-06-11 10:12:21
【问题描述】：

我只想使用 Material Ui 库中的一个组件。我知道我只能使用 ES6 import 导入一个组件，但是 webpack treeshake 并从库中删除其他组件或将它们包含在生产中。

请帮帮我。

【问题讨论】：

标签： reactjs webpack react-router material-ui

【解决方案1】：

从 v2 开始的 Webpack 分两步消除未使用的导出：

首先，所有 ES6 模块文件都被合并到一个单独的包文件中，在该文件中，没有在任何地方导入的导出将不再导出。

第二，压缩包，同时消除死代码。因此，既未导出也未在其模块内使用的实体不会出现在缩小包中。如果没有第一步，死代码消除永远不会删除导出。

只有在模块系统具有静态结构的情况下，才能在构建时可靠地检测到未使用的导出。

Webpack 自身不执行 tree-shaking。它依赖于像UglifyJS 这样的第三方工具来执行实际的死代码消除。

为此，您可以使用安装它

npm install --save-dev uglifyjs-webpack-plugin

然后将其添加到配置中：

webpack.config.js

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new UglifyJSPlugin()
  ]
};

因此，当您添加此配置时，您未使用的导出将不再存在于缩小版本中。

【讨论】：