是不是需要将每一个模块编译成不同 JS？如果是的话，应该如何配置？否则应该采用什么样的思路？

在Angular中，直接将每个模块编译成单独的JS文件以实现按需加载和权限控制，并不是最佳实践，尤其是在Angular 2及以上版本中。Angular本身就支持懒加载（lazy loading）特性，这个功能可以让你在用户需要时才异步加载模块及相关代码，而不是一次性加载整个应用的所有模块，这既优化了初始加载时间，也间接实现了某种程度的代码保护。

懒加载配置

在Angular应用中实现懒加载，你需要在路由配置中使用loadChildren属性来指定懒加载模块的路径。例如：

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { 
    path: 'protected-module',
    loadChildren: () => import('./protected-module/protected-module.module').then(m => m.ProtectedModule)
  }
];

在这个例子中，当用户导航到/protected-module路径时，Angular才会去加载ProtectedModule及其相关依赖。

控制模块访问权限

至于控制用户访问特定模块的权限，这通常在应用的业务逻辑层处理，而非直接通过编译设置。你可以使用Angular的服务来管理用户权限，比如在路由守卫（Route Guards）中检查用户是否有权访问某个模块：

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // 这里检查用户权限，例如从服务获取用户角色并判断是否允许访问
    return this.authService.isAuthenticated() && this.authService.hasPermission('view_protected_module');
  }
}

然后，在路由配置中应用守卫：

const routes: Routes = [
  // ...
  {
    path: 'protected-module',
    canActivate: [AuthGuard],
    loadChildren: () => import('./protected-module/protected-module.module').then(m => m.ProtectedModule)
  }
];

代码保护

对于保护不可见的模块代码，除了懒加载和权限控制外，还可以考虑代码混淆和压缩，以及使用 Ahead-of-Time (AOT) 编译来提高代码的安全性和性能。这些措施可以在构建过程中通过Angular CLI配置实现。