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

rdlzhqv9  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(166)

我只想使用Material Ui库中的一个组件。我知道我只能使用ES6导入来导入一个组件,但Webpack是否会从库中删除其他组件或将其包含在生产中。
请帮帮我。

ippsafx7

ippsafx71#

从v2开始的Webpack通过两个步骤消除未使用的导出:

**首先,**所有ES6模块文件被合并到一个单一的捆绑包文件中,在该捆绑包文件中,没有导入到任何地方的导出将不再被导出。
第二,在消除死代码的同时,包被缩小。因此,既没有导出也没有在其模块内使用的实体不会出现在缩小的包中。如果没有第一步,死代码消除将永远不会删除导出。

如果模块系统具有静态结构,则只有在构建时才能可靠地检测到未使用的导出。
Webpack本身并不执行树摇动,它依赖于第三方工具(如UglifyJS)来执行真正的死代码消除。
为此,您可以使用

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

然后将其添加到配置中:

网页包.配置.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()
  ]
};

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

332nm8kg

332nm8kg2#

Webpack 5附带了terser-webpack-plugin,因此您可以直接导入它并根据需要进行配置。

相关问题