Webpack Tree Shaking无法正常工作

编程问答 2022-06-04

问题描述

我有一个相对简单的库，正在使用Webpack进行捆绑。该库在window上可用。我无法摇晃树来正常工作。我必须删除未使用的代码才能使其真正被摇动。大致来说，我的代码结构如下：

entry.js 

import Formatters from './formatters/formatters';

export { Formatters };

formatters / formatters.js 

import { formatAttribute,prettyPrint } from './formatters-internal';

const Formatters = {
  formatAttribute,prettyPrint,};

export { Formatters as default };

和formatters / formatters-internal.js 

import prettyFormat from 'pretty-format';

export function prettyPrint(val) {
  return prettyFormat(val);
}

export function formatAttribute(object,key='test') {
  if (!object[key]) {
    return '';
  }
  return `${object[key]}`;
}

在formatters.js中，我希望从prettyPrint语句和import对象中删除Formatters时，pretty-format依赖项不包括在内我的包。事实并非如此。它仍然是捆绑包的一部分。我必须进入formatters-internal并实际上删除prettyPrint函数才能将其删除。由于此应用程序的使用方式，因此不能简单地从formatters-internal中删除内容。这是我的Webpack配置的样子：

module.exports = function () {
  return {
    mode: 'production',entry: {
      'bundle': './src/entry.js'
    },output: {
      filename: '[name].js',library: 'SomeLibrary',libraryTarget: 'window'
    }
  }
};

我不确定我在做什么错。 Babel并未用于将事物转换为Commonjs。我还确保我的package.json（和pretty-format的package.json）具有"sideEffects: false"。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ecmascript-6tree-shakingwebpackwebpackwebpack