webpack 导入所有代码而不是一些函数

Question

我有一个非常简单的 webpack 配置，如下所示：

var path = require('path');

module.exports = {
  entry: {
    test: "./index.js"
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

在我的文件 index.js 中，我正在使用 Ramda 编写一些代码，并像这样导入它：

import { compose, head, tail } from 'ramda';

稍后我将使用 webpack -p 进行构建。使用几行代码，我的构建是 59,2Kb，当我使用 webpack-bundle-analyzer 时，我看到所有函数都在包中——整个 Ramda 库。如果我用

导入

import ramda from 'ramda';

我有相同的包裹尺寸。这是为什么？我究竟做错了什么？我正在使用最新的 webpack 版本 3.5.5。谢谢

Answer 1

Ramda doesn't natively use ES2015 modules yet，因此Webpack无法对其进行tree shaking。

同时，您可以像这样导入单个模块：

import compose from "ramda/src/compose";
import head from "ramda/src/head";
import tail from "ramda/src/tail";

或者，您可以使用 babel-plugin-ramda，它会分析您的代码以找出您实际使用的 Ramda 函数并删除其余函数。

webpack 导入所有代码而不是一些函数

webpack import all code instead of some functions

javascript

webpack

ramda.js