Remix.run能否设置受保护路由 避免非管理员获取受保护源码

问题1：能否实现仅管理员可见的受保护路由，避免普通用户获取对应组件代码 #

完全可以实现，这是Remix 服务端优先设计 天然支持的特性。

• Remix 采用文件系统路由，你可以将所有管理员专属的路由统一放在app/routes/admin目录下，在该目录的根layout的loader函数中做权限校验
• 当请求进入时，服务端会先执行loader逻辑，若校验发现当前用户不是管理员，可直接返回重定向响应或者抛出403错误，此时服务端根本不会将管理员路由对应的组件代码下发到客户端，普通用户的JS包中完全不会包含这部分代码
• 这种实现和传统客户端路由的前端权限拦截完全不同：客户端路由哪怕做了渲染拦截，对应组件代码依然会被打包到全量JS包中，用户可以通过前端源码翻到相关逻辑，而Remix的这种服务端侧权限校验+按需下发的逻辑从根源上避免了敏感代码泄露的问题。

问题2：Remix.run 是否支持代码分割能力 #

支持，且默认提供开箱即用的路由级代码分割，也支持自定义组件级代码分割。

• 默认路由级代码分割：Remix 会自动按照文件系统路由的拆分做代码分割，用户访问某个路由时才会加载该路由对应的JS、CSS资源，无需开发者做额外的配置
• 组件级代码分割：如果需要对非路由的大体积组件做按需加载，可以直接使用React原生的React.lazy + Suspense能力，示例如下：

import { Suspense, lazy } from 'react'
// 仅当组件需要渲染时才会加载对应代码
const HeavyChart = lazy(() => import('./HeavyChart'))

function ReportPage() {
  return (
    <div>
      <h1>数据报表</h1>
      <Suspense fallback={<div>加载中...</div>}>
        <HeavyChart />
      </Suspense>
    </div>
  )
}

• 额外的优化能力：Remix还支持手动预加载指定路由的资源，你可以在用户 hover 到导航链接时提前触发对应路由代码的加载，进一步提升交互体验。

内容的提问来源于stack exchange，提问作者deckele