All geek questions in one place

How can I shake the Three.js tree using WebPack or Rollup?

I have a Three.js script that uses only part of the library.

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

But I still get a large, if not all, entire library (~ 500Kb minified). Is anyone really lucky with this? I have a GitHub example that shows the code that I use.

+5
source share
2 answers

I am currently using WebPack2 in a project and am switching to using inline chatter. Go through the steps:

  • obviously install current three.js via npm: npm install three

  • in webpack-config, we need to redefine what happens when you import {Something} from 'three'; in your code. To do this, I use alias-setting in resolver-config to use an alternative modular assembly, which is part of the newer.js version:

      { resolve: { extensions: ['.js'], modules: [SRC_PATH, 'node_modules'], alias: { 'three': path.join(__dirname, 'node_modules/three/build/three.module.js') } } }

  • Now, if you use babel to forward your javascript, you need to make sure that the plugin that compiles es6 modules in commonjs is not included. Otherwise, the tree tremor just won't find any es6 modules to shake (in case you are already using the es2015 preset, you can use babel-preset-es2015-native-modules instead). There is more information about this in this blog post .

+3
source

I believe your problem is that you need to start your import from THREE src / tree, which is not in build / dir, you will need to clone THREE to have a local src / tree against which your application is running.

In particular, you can use src / Three.js, which is a giant exporter of all THREE modules. Or just change the import to refer to src // module.js.

Then the cumulative package will have separate modules to run and, thus, skip unused code.

Edit: see https://github.com/mrdoob/three.js/issues/10328#issuecomment-290233801 for more

+1
source

Source: https://habr.com/ru/post/1262500/

More articles:


All Articles