{"id":16694942,"url":"https://github.com/yushijinhun/three-minifier","last_synced_at":"2025-04-05T03:09:53.581Z","repository":{"id":37988129,"uuid":"236145419","full_name":"yushijinhun/three-minifier","owner":"yushijinhun","description":"Minify THREE.js","archived":false,"fork":false,"pushed_at":"2024-07-16T03:13:47.000Z","size":758,"stargazers_count":190,"open_issues_count":3,"forks_count":4,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-29T02:05:17.559Z","etag":null,"topics":["javascript","rollup","threejs","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yushijinhun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-25T08:41:40.000Z","updated_at":"2025-02-16T13:59:06.000Z","dependencies_parsed_at":"2024-10-23T08:24:39.570Z","dependency_job_id":"56c94e5f-8f5a-4487-9de4-6f7e5b4a1046","html_url":"https://github.com/yushijinhun/three-minifier","commit_stats":{"total_commits":119,"total_committers":4,"mean_commits":29.75,"dds":"0.025210084033613467","last_synced_commit":"486290485925eb701b5b87f1e67c1be8b544f9e0"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yushijinhun%2Fthree-minifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yushijinhun%2Fthree-minifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yushijinhun%2Fthree-minifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yushijinhun%2Fthree-minifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yushijinhun","download_url":"https://codeload.github.com/yushijinhun/three-minifier/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280272,"owners_count":20912967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","rollup","threejs","webpack"],"created_at":"2024-10-12T17:04:33.079Z","updated_at":"2025-04-05T03:09:53.557Z","avatar_url":"https://github.com/yushijinhun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# three-minifier\n[![GitHub tag (latest SemVer pre-release)](https://img.shields.io/github/v/tag/yushijinhun/three-minifier?color=yellow\u0026include_prereleases\u0026label=version\u0026sort=semver\u0026style=flat-square)](https://github.com/yushijinhun/three-minifier/releases)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/yushijinhun/three-minifier/main.yml?branch=master\u0026logo=github\u0026style=flat-square)](https://github.com/yushijinhun/three-minifier/actions?query=workflow%3ACI)\n\nMinify THREE.js\n\n## Introduction\nThis plugin helps projects who use THREE.js shrink their size by:\n * Resolve `three` / `three/build/three.module.js` to `three/src/Three.js`.\n    * This makes it possible for bundlers to perform better tree-shaking.\n * Mark `three` as side-effect free.\n * Replace WebGL constants with literals.\n * Minify GLSL files.\n\nThis plugin also resolves `three-nodes` and `three-addons` modules.\n\n## Requirements\n * node **\u003e= v12.0**\n * three.js **\u003e= r120**\n * Webpack plugin requires Webpack 5\n\n## Usage\n\n### Rollup\n```\nnpm install --save-dev @yushijinhun/three-minifier-rollup\n```\n\n`rollup.config.js`:\n```javascript\nimport { threeMinifier } from \"@yushijinhun/three-minifier-rollup\";\n...\nexport default {\n\t...\n\tplugins: [\n\t\tthreeMinifier(), // \u003c=== Add plugin on the FIRST line\n\t\t...\n\t]\n};\n```\n\n### Webpack\n```\nnpm install --save-dev @yushijinhun/three-minifier-webpack\n```\n\n`webpack.config.js`:\n```javascript\nconst ThreeMinifierPlugin = require(\"@yushijinhun/three-minifier-webpack\");\nconst threeMinifier = new ThreeMinifierPlugin();\n...\nmodule.exports = {\n\t...\n\tplugins: [\n\t\tthreeMinifier, // \u003c=== (1) Add plugin on the FIRST line\n\t\t...\n\t],\n\tresolve: {\n\t\tplugins: [\n\t\t\tthreeMinifier.resolver, // \u003c=== (2) Add resolver on the FIRST line\n\t\t\t...\n\t\t]\n\t}\n};\n```\n\n### Next.js\n```\nnpm install --save-dev @yushijinhun/three-minifier-webpack\n```\n\n`next.config.js`:\n```js\nconst ThreeMinifierPlugin = require(\"@yushijinhun/three-minifier-webpack\");\n\nmodule.exports = {\n\twebpack: (config, { isServer, dev }) =\u003e {\n\t\tif (!isServer \u0026\u0026 !dev) {\n\t\t\tconfig.cache = false;\n\t\t\tconst threeMinifier = new ThreeMinifierPlugin();\n\t\t\tconfig.plugins.unshift(threeMinifier);\n\t\t\tconfig.resolve.plugins.unshift(threeMinifier.resolver);\n\t\t}\n\t\treturn config;\n\t},\n};\n```\n\n### Vite \u0026 SvelteKit\nMost Rollup plugins [are compatible with Vite](https://vitejs.dev/guide/api-plugin.html#rollup-plugin-compatibility), including three-minifier. [SvelteKit](https://kit.svelte.dev/) uses Vite as its build tool, so the setup is the same as for Vite.\n\n```\nnpm install --save-dev @yushijinhun/three-minifier-rollup\n```\n\n`vite.config.(js|ts)`:\n```js\nimport { defineConfig } from \"vite\";\nimport { threeMinifier } from \"@yushijinhun/three-minifier-rollup\";\n// import { sveltekit } from '@sveltejs/kit/experimental/vite';\n\nexport default defineConfig({\n\tplugins: [\n\t\t{ ...threeMinifier(), enforce: \"pre\" }, // \u003c=== Add plugin here\n\t\t// sveltekit(),\n\t]\n});\n```\n\n## FAQ\n### Does it really work?\nYes!\n\nConsider the following example:\n```javascript\nimport { WebGLRenderer } from \"three\";\nconsole.log(WebGLRenderer);\n```\n * Rollup: 576K =\u003e 354K\n * Webpack: 582K =\u003e 354K\n\n### Do I need to modify any existing code?\nNo. These are the acceptable approaches to importing THREE.js:\n```javascript\nimport { ... } from \"three\";\nimport { ... } from \"three/build/three.module.js\";\nimport { ... } from \"three/src/Three\";\nimport { ... } from \"three/src/math/vector3\";\n// or something like these\n```\n\n### Does this work with examples jsm modules?\nYes. This plugin solves [mrdoob/three.js#17482](https://github.com/mrdoob/three.js/issues/17482).\n\nYou do not need to do any extra work to use examples jsm modules.\n```javascript\nimport { OrbitControls } from \"three/examples/jsm/controls/OrbitControls\";\n// import { OrbitControls } from \"three-addons/controls/OrbitControls\"; // equivalent to the previous one\n\nimport { NodeMaterial } from \"three/examples/jsm/nodes/materials/Materials\";\n// import { NodeMaterial } from \"three-nodes/materials/Materials\"; // equivalent to the previous one\n```\n\n### Will one day I no longer need this plugin?\nIn order to make THREE.js tree-shakable, efforts have been made by many people on the upstream project.\nHowever, THREE.js hasn't come up with a feasible solution so far. See [related issues](#related-issues--repositories) to learn more.\n\n## Related issues \u0026 repositories\n * [Importing examples jsm modules causes bundlers to bundle three.js source code twice _mrdoob/three.js#17482_](https://github.com/mrdoob/three.js/issues/17482)\n * [ReactAreaLights do not seem to work in a module bundler _mrdoob/three.js#17220_](https://github.com/mrdoob/three.js/issues/17220)\n * [Add sideEffects: false flag to package.json to allow tree shaking _mrdoob/three.js#16059_](https://github.com/mrdoob/three.js/issues/16059)\n * [Allow tree-shaking by adding \"sideEffects\": false flag _mrdoob/three.js#16317_](https://github.com/mrdoob/three.js/pull/16317)\n * [Enable tree-shaking both for the main and examples files _mrdoob/three.js#16301_](https://github.com/mrdoob/three.js/pull/16301)\n * [Support esm on node with conditional exports _mrdoob/three.js#18498_](https://github.com/mrdoob/three.js/pull/18498)\n * [Examples: add three/addons/* alias _mrdoob/three.js#23406_](https://github.com/mrdoob/three.js/pull/23406)\n * [Avoid bare imports other than 'three' _mrdoob/three.js#23625_](https://github.com/mrdoob/three.js/issues/23625)\n * [Add three/addons (for npm users only) _mrdoob/three.js#23368_](https://github.com/mrdoob/three.js/pull/23368)\n * [vxna/optimize-three-webpack-plugin](https://github.com/vxna/optimize-three-webpack-plugin)\n * [mattdesl/threejs-tree-shake](https://github.com/mattdesl/threejs-tree-shake)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyushijinhun%2Fthree-minifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyushijinhun%2Fthree-minifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyushijinhun%2Fthree-minifier/lists"}