借助Code Splitting 提升单页面应用性能

近日的工作集中于一个单页面应用(Single－page application)，在项目中尝试了闻名已久的Code splitting，收获极大，特此分享。

Why we need code splitting

SPA的客户端路由极大的减少了Server 与 Client端之间的Round trip，在此基础上，我们还可以借助Server Side Rendering 砍掉客户端的初次页面渲染时间(这里是SSR实现的参考链接：React，Angular2).

仍然有一个问题普遍存在着：随着应用复杂度/规模的增加，应用初始所加载的文件大小也随之增加。我们可以通过将文件分割成按需加载的chunks来解决这一问题，对于初始页面，只请求他所用到的模块的相关文件，等我们进入新的路由，或者使用到一些复杂的功能模块时，才加载与之相关的chunk。

借助于webpack与react-router(目前我的应用是基于React开发的)，我们可以快速实现这些按需加载的chunks。

webpack

Webpack是非常火的一个module bundler，这里是一个很好的入门参考链接。

我们可以借助代码中定义split point以创建按需加载的chunk。

使用require.ensure(dependencies, callback)可以加载 CommonJs modules, 使用require(dependencies, callback)加载 AMD modules。webpack会在build过程中检测到这些split points，创建chunks。

React router

React router 是一个基于React且非常流行的客户端路由库。

我们能以plain JavaScript object或者declaratively的形式定义客户端路由。

Plain JavaScript way:

let myRoute = {

  path: `${some path}`,

  childRoutes: [

    RouteA,

    RouteB,

    RouteC,

  ]

}

declaratively way:

const routes = (

  <Route component={Component}>

    <Route path="pathA" component={ComponentA}/>

    <Route path="pathB" component={ComponentB}/>

  </Route>

)

React router 可以实现代码的lazy load, 而我们正好可以把split points 定义在这些lazy load code中(参考链接)。

Code Splitting implement

below is a demo of create two on demand loaded chunks, chunk A will load once when enter rootUrl/A, chunk B will load once when enter rootUrl/B.

接下来的代码就是创建按需加载的chunks的例子，chunk A 只有当进入rootUrl/A才会加载，chunk B 只有当进入rootUrl/B才会加载。

routes

/* ---            RootRoute            --- */

...

import RouteA from './RouteA'

import RouteB from './RouteB'

export default {

  path: '/',

  component: App,

  childRoutes: [

    RouteA,

    RouteB,

  ],

  indexRoute: {

    component: Index

  }

}

/* ---              RouteA              --- */

...

export default {

  path: 'A',

  getComponent(location, cb) {

    require.ensure([], (require) => {

      cb(null, require(`${PathOfRelatedComponent}`))

    }, 'chunkA')

  }

}

/* ---              RouteB              --- */

...

export default {

  path: 'B',

  getComponent(location, cb) {

    require.ensure([], (require) => {

      cb(null, require(`${PathOfRelatedComponent}`))

    }, 'chunkB')

  }

}

client side code for client side render

...

import { match, Router } from 'react-router'

const { pathname, search, hash } = window.location

const location = `${pathname}${search}${hash}`

//use match to trigger the split code to load before rendering.

match({ routes, location }, () => {

  render(

    <Router routes={routes} history={createHistory()} />,

      document.getElementById('app')

  )

})

server code for server side rendering

...

app.createServer((req, res) => {

  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {

    if (error)

      writeError('ERROR!', res)

    else if (redirectLocation)

      redirect(redirectLocation, res)

    else if (renderProps)

      renderApp(renderProps, res)

    else

      writeNotFound(res)

}).listen(PORT)

function renderApp(props, res) {

  const markup = renderToString(<RoutingContext {...props}/>)

  const html = createPage(markup)

  write(html, 'text/html', res)

}

export function createPage(html) {

  return `

  <!doctype html>

  <html>

    <head>

      <meta charset="utf-8"/>

      <title>My Universal App</title>

    </head>

    <body>

      <div id="app">${html}</div>

      <script src="/__build__/main.js"></script>

    </body>

  </html>

  `

}

实现中可能会遇到的坑

取决于你是如何写自己的模块的，你可能会遇到这个错误：React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of RoutingContext.在require()之后加一个.default即可。

如果你收到了这样的错误提示：require.ensure is not function，增加一个polyfill即可: if (typeof require.ensure !== 'function') require.ensure = (d, c) => c(require)，在Server端使用require来代替require.ensure.

谢谢，希望能指正我的错误！

最后附一张目前项目的chunks图：