我只想使用Material Ui库中的一个组件。我知道我只能使用ES6导入来导入一个组件,但Webpack是否会从库中删除其他组件或将其包含在生产中。请帮帮我。
ippsafx71#
从v2开始的Webpack通过两个步骤消除未使用的导出:
**首先,**所有ES6模块文件被合并到一个单一的捆绑包文件中,在该捆绑包文件中,没有导入到任何地方的导出将不再被导出。第二,在消除死代码的同时,包被缩小。因此,既没有导出也没有在其模块内使用的实体不会出现在缩小的包中。如果没有第一步,死代码消除将永远不会删除导出。
如果模块系统具有静态结构,则只有在构建时才能可靠地检测到未使用的导出。Webpack本身并不执行树摇动,它依赖于第三方工具(如UglifyJS)来执行真正的死代码消除。为此,您可以使用
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() ] };
因此,当您添加此配置时,您未使用的导出将不再出现在简化版本中。
332nm8kg2#
Webpack 5附带了terser-webpack-plugin,因此您可以直接导入它并根据需要进行配置。
2条答案
按热度按时间ippsafx71#
从v2开始的Webpack通过两个步骤消除未使用的导出:
**首先,**所有ES6模块文件被合并到一个单一的捆绑包文件中,在该捆绑包文件中,没有导入到任何地方的导出将不再被导出。
第二,在消除死代码的同时,包被缩小。因此,既没有导出也没有在其模块内使用的实体不会出现在缩小的包中。如果没有第一步,死代码消除将永远不会删除导出。
如果模块系统具有静态结构,则只有在构建时才能可靠地检测到未使用的导出。
Webpack本身并不执行树摇动,它依赖于第三方工具(如
UglifyJS
)来执行真正的死代码消除。为此,您可以使用
然后将其添加到配置中:
网页包.配置.js
因此,当您添加此配置时,您未使用的导出将不再出现在简化版本中。
332nm8kg2#
Webpack 5附带了terser-webpack-plugin,因此您可以直接导入它并根据需要进行配置。