Как мне трясти дерево Three.js с помощью WebPack или Rollup?

У меня есть сценарий Three.js, в которой используется только часть библиотеки.Как мне трясти дерево Three.js с помощью WebPack или Rollup?

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

Но я все равно получаю большую часть, если не все, всей библиотеки (~ 500Kb minified). Неужели кому-то повезло с этим? У меня есть example GitHub, который показывает код, который я использую.

источник

2017-01-08 Chris

в общем, я думаю, что JS разработчики должны начать ходить через дерево, как встряхивая реализуются в накопительном пакете и Webpack, на данный момент существует слишком много магии в том, как они работают. У меня также была такая же проблема несколько раз, и трудно сказать, действительно ли libs настолько малы, насколько они могут быть. –

Я экспериментировал с этим в последнее время и немного позже, может быть, вам интересно посмотреть? [репо] (https://github.com/2pha/three-rollup-treeshake-test) – 2pha

В настоящее время я использую WebPack2 в проекте и переключился на использование встроенного дрожания дерева. Давайте пройдемся по шагам:

очевидно, установить текущий three.js через НПЙ: npm install three
в WebPack-конфигурации, необходимо переопределить то, что происходит, когда вы import {Something} from 'three'; в вашем коде. Для этого я использую alias-setting из распознавателя-конфигурации, чтобы использовать альтернативный модуль-сборки, который входит в новый Three.js версии:
```
{ 
    resolve: { 
    extensions: ['.js'], 
    modules: [SRC_PATH, 'node_modules'], 
    alias: { 
     'three': path.join(__dirname, 'node_modules/three/build/three.module.js') 
    } 
    } 
} 
```
теперь, если вы используете столпотворение, чтобы transpile ваш JavaScript , вы должны убедиться, что плагин, который компилирует es6-модули в commonjs, не включен. В противном случае дрожание древовидного дерева просто не найдет никаких es6-модулей, чтобы встряхнуть (в случае, если вы уже используете предустановку es2015, вместо этого вы можете использовать babel-preset-es2015-native-modules). Дополнительная информация об этом содержится в this blog-post.

источник

2017-01-09 23:10:51

Спасибо за помощь. Тем не менее, я все еще получаю большой файл того же размера. С или без псевдонима Webpack уже использует файл модуля в 'три'. Это как раз то, что написано тремя? – Chris

У вас будет другой взгляд на это в ближайшее время и обновите здесь соответственно. –

@ Крис: Я перепроверялся и, к сожалению, это, вероятно, так хорошо, как сейчас. Если вы посмотрите на недофинансированный вывод, вы увидите много комментариев об неиспользованном экспорте гармонии, поэтому webpack понял, что они не нужны. Однако в настоящее время веб-пакет не может удалить неиспользуемый экспорт, если он используется где-то еще в коде, даже если он используется другим неиспользуемым другим классом. Здесь также не было лучшего результата. –

Я считаю, что ваша проблема в том, что вам нужно, чтобы запустить импорт из ТРИ SRC/дерева, которое не находится в сборках/директории, вам нужно клонировать ТРИ иметь локальный Src/дерево против которых ваше приложение запускается.

В частности, вы можете использовать src/Three.js, который является гигантским экспортером всех трех модулей. Или просто измените импорт, чтобы обратиться к src // module.js.

Тогда накопительный пакет будет иметь отдельные модули для запуска и, таким образом, опустить неиспользованный код.

Edit: см https://github.com/mrdoob/three.js/issues/10328#issuecomment-290233801 более

источник

2017-03-30 20:03:28 backspaces

Как мне трясти дерево Three.js с помощью WebPack или Rollup?

ответ

Смежные вопросы