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()
  ]
};

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

Answer 2

每个组件都有自己的索引，因此如果您正确导入组件，其余组件将不会包含在您的构建中。

使用：

import Button from 'material-ui/Button';

不要使用：

import Button from 'material-ui'

（快速和脏测试除外）。即使树木发抖，你最终会得到一个明显更大的束大小。树摇动对HOC不起作用，每个组件都包裹在一起。

仅在打包的捆绑包ReactJS中包含已使用的导入

2 个答案: