在打包的软件包ReactJS中仅包含使用过的导入

Question

我只想使用Material Ui库中的一个组件。我知道我只能使用ES6导入来导入一个组件，但是可以进行webpack握手和从库中删除其他组件，或者将它们包括在生产中。

请帮我。

Answer 1

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

首先，将所有ES6模块文件组合成一个捆绑文件，其中不再导出未导出到任何地方的导出。

其次，将包最小化，同时消除无效代码。因此，既不导出也不在其模块内部使用的实体不会出现在缩小的捆绑包中。没有第一步，消除无效代码将永远不会消除出口。

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

Webpack本身不会执行摇树。它依靠第三方工具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()
  ]
};

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