js 怎样做到按需加载？

Question

threejs 构建场景时需要调用的js太多，怎样按需加载？

尝试过requirejs，但感觉不太对需求。

比如 构建一种材质，需要导入大概10+个js，但这种材质不是最初就使用的（比如切换材质的展示需求）
怎样能使用时才会去加载这10+的js？

Answer 1

requirejs和 seajs都可以做到的

require(['jquery'], function ($) {
    $(function () {
        //只有用户点击了某个按钮，才动态加载knockoutjs
        $("#test").click(
            function () {
                require(['knockout'], function (ko) {
                    alert(ko.version);
                });
            }
        );
    });

Answer 2

原生js可以通过动态创建script标签来实现按需加载。

如果你是用react可以用react-loadable这个库来实现

import Loadable from 'react-loadable';
import Loading from './my-loading-component';
 
const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});
 
export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}