Tại sao tất cả các lodash kết thúc trong xây dựng webpack của tôi?

Question

Tôi đã kiểm tra tất cả các thư viện bao gồm nó và tất cả đều bao gồm các chức năng thông qua đường dẫn đầy đủ của chúng, tức là: import find from 'lodash/find'.

Redux là phụ thuộc chính sử dụng nó và tôi đã kiểm tra mã của họ, và nó nhập chính xác từng chức năng theo đường dẫn đầy đủ của nó.

Đây là kết quả của json webpack build của tôi hình dung:

https://www.dropbox.com/s/njjjtgtw19d52j6/Screenshot%202016-10-30%2006.27.44.png?dl=0

Như bạn thấy, lodash đang chiếm một tỷ lệ rất lớn, trong khi chỉ có một vài trong số các phương pháp của nó được sử dụng. Sử dụng webpack-bundle-size-analyzer lodash đi ra đến 135kb (trước khi minified và gzipped của khóa học), nhưng nó vẫn còn lớn hơn rất nhiều so với nó phải được.

Có ai khác có kinh nghiệm này không? Tôi cảm thấy như nó bằng cách nào đó redux.

CẬP NHẬT: Tôi đã tìm thấy gói nhập hàm lodash sử dụng cú pháp chấm: import find from 'lodash.find'. Có lẽ điều đó. Sự khác nhau giữa cú pháp chấm và cú pháp đường dẫn đầy đủ là gì?

Answer 1

Sử dụng babel-plugin-lodash để chuyển đổi tất cả các hàng nhập khẩu của các phương pháp lodash như import { map } from 'lodash'; chỉ đạo tài liệu tham khảo để import _map from 'lodash/map';:

{ 
    "plugins": ["lodash"], 
    "presets": ["es2015"] 
} 

Kết hợp nó với lodash-webpack-plugin để chỉ bao gồm các tính năng bạn cần:

plugins: [ 
    new LodashModuleReplacementPlugin({ 'collections': true }) 
]