Jak mogę wstrząsnąć drzewem Three.js przy użyciu pakietu WebPack lub zbiorczego?

Mam scenę Three.js, która korzysta tylko z części biblioteki.Jak mogę wstrząsnąć drzewem Three.js przy użyciu pakietu WebPack lub zbiorczego?

import { 
    Scene, 
    PerspectiveCamera, 
    WebGLRenderer, 
    BoxGeometry, 
    MeshBasicMaterial, 
    Mesh} from 'three';

Ale nadal otrzymuję większość, jeśli nie wszystkie, z całej biblioteki (~ 500Kb minified). Czy ktoś miał na to szczęście? Mam kod example GitHub, który pokazuje kod, którego używam.

Źródło

2017-01-08 Chris

w ogóle, myślę deweloperów JS zacząć chodząc jak drzewo potrząsając są realizowane w pakiecie zbiorczym i Webpack, w tej chwili nie ma zbyt wiele magii w jaki sposób one działają. Kilka razy miałem ten sam problem i trudno powiedzieć, czy biblioteki są tak małe, jak tylko mogą być. –

Trochę ostatnio eksperymentowałem z tym, może jesteś zainteresowany? [repo] (https://github.com/2pha/three-rollup-treeshake-test) – 2pha

Aktualnie używam WebPack2 w projekcie i przełączam się na używanie wbudowanego drzewa. Przejdźmy przez kroki:

oczywiście zainstalować aktualne Three.js przez KMP: npm install three
w WebPACK-config, musimy przesłonić tego, co się dzieje, kiedy import {Something} from 'three'; w kodzie. Aby to zrobić, używam alias-setting resolvera-config użyć alternatywnego module-build, który jest dołączony nowsze Three.js wersjach:
```
{ 
    resolve: { 
    extensions: ['.js'], 
    modules: [SRC_PATH, 'node_modules'], 
    alias: { 
     'three': path.join(__dirname, 'node_modules/three/build/three.module.js') 
    } 
    } 
} 
```
teraz, jeśli używasz Babel transpile JavaScript , upewnij się, że wtyczka, która kompiluje moduły es6 do commonjs, nie jest dołączona. W przeciwnym razie drżenie drzewa babelskiego po prostu nie znajdzie żadnych modułów es6 do wstrząśnięcia (w przypadku, gdy już używasz presetu es2015, możesz zamiast tego użyć babel-preset-es2015-native-modules). Więcej informacji na ten temat można znaleźć pod adresem this blog-post.

Źródło

2017-01-09 23:10:51

Dzięki za pomoc. Jednak wciąż mam duży plik o tym samym rozmiarze. Z lub bez aliasu, Webpack używa już pliku modułu w 'trzech'. Czy to jest coś w stylu, w jaki napisano trzy? – Chris

Zostanie jeszcze jedno spojrzenie na to i tutaj odpowiednio zaktualizujemy. –

@Chris: Ponownie sprawdziłem i niestety jest to prawdopodobnie tak dobre, jak na razie. Jeśli spojrzysz na nieumiejętne dane wyjściowe, zobaczysz wiele komentarzy "nieużywanych eksportów harmonii", więc pakiet Webpack zdał sobie sprawę, że nie są one potrzebne. Jednak pakiet internetowy nie może obecnie usunąć nieużywanych eksportów, jeśli są one używane gdzie indziej w kodzie, nawet jeśli są używane przez nieużywaną inną klasę. Również w tym miejscu nie udało się uzyskać lepszych wyników w pakiecie. –

wierzę, problem jest, że trzeba uruchomić import z trzech src/drzewa, które nie jest w kompilacji/dir, trzeba by mieć sklonować trzy do lokalnego src/drzewa przeciw którym twoja aplikacja działa.

W szczególności można użyć src/Three.js, który jest gigantycznym eksporterem wszystkich trzech modułów. Lub po prostu zmień import, aby odwołać się do src // module.js.

Wówczas pakiet zbiorczy będzie miał poszczególne moduły, które można uruchomić i tym samym pominie nieużywany kod.

Edit: patrz https://github.com/mrdoob/three.js/issues/10328#issuecomment-290233801 dłużej

Źródło

2017-03-30 20:03:28 backspaces

Jak mogę wstrząsnąć drzewem Three.js przy użyciu pakietu WebPack lub zbiorczego?

Odpowiedz

Powiązane problemy