极客园PC-第5章 项目打包与性能优化

项目打包

项目打包和发布

• 项目打包：yarn build （ build 构建 ）
  • 打包后的内容放在 build 目录中
  • 项目上线，就是将 build 目录中的内容，放到服务器中即可

yarn build  打包

yarn global add serve
serve -s build      //启动打包的服务

按需加载

• 性能优化：
  • 实现按需加载：访问哪个页面才去加载这个页面的 JS 文件，而不是第一次访问网站就把网站中的 JS 文件一次性全部加载
  • 按需加载：第一次打开网站，加载的内容少，速度快
  • 一次性全部加载：第一次打开网站，加载的内容多，速度慢，用户减少
  • 代码分隔

// 使用之前：
import OtherComponent from './OtherComponent';

// 只要将导入组件的方式，换成下面这种即可：
// 使用之后：
const OtherComponent = React.lazy(() => import('./OtherComponent'));

• 代码修改：

const Login = React.lazy(() => import('pages/Login'))
const Layout = React.lazy(() => import('pages/Layout'))

{/* 路由规则 */}
<Suspense
  fallback={
    <div
      style={{
        textAlign: 'center',
        marginTop: 200,
      }}
    >
      loading...
    </div>
  }
>
  <Switch>
    <Redirect exact from="/" to="/home"></Redirect>
    <AuthRoute path="/home" component={Layout}></AuthRoute>
    <Route path="/login" component={Login}></Route>
  </Switch>
</Suspense>