reactjs - 仅包含打包包 ReactJS 中使用过的导入

Question

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

请帮助我。

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

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