的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不能在它上面執行樹抖動。

在此期間，您可以導入單獨的模塊，像這樣：

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

或者，你可以使用babel-plugin-ramda，它分析你的代碼搞清楚你實際使用該Ramda功能，並刪除其餘部分。