<commit_before># ✂️ code-split-component

Declarative code splitting for your Wepback bundled React projects, with SSR support.

[![npm](https://img.shields.io/npm/v/code-split-component.svg?style=flat-square)](http://npm.im/code-split-component)
[![MIT License](https://img.shields.io/npm/l/code-split-component.svg?style=flat-square)](http://opensource.org/licenses/MIT)
[![Travis](https://img.shields.io/travis/ctrlplusb/code-split-component.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/code-split-component)
[![Codecov](https://img.shields.io/codecov/c/github/ctrlplusb/code-split-component.svg?style=flat-square)](https://codecov.io/github/ctrlplusb/code-split-component)

```jsx

import { CodeSplit } from 'code-split-component';

<CodeSplit chunkName="foo" modules={{ Foo: require('../Foo') }}>
  { ({ Foo }) => Foo && <Foo /> }
</CodeSplit>
```

## TOCs

 - [About](https://github.com/ctrlplusb/code-split-component#about)
 - [Demo](https://github.com/ctrlplusb/code-split-component#demo)
 - [Installation](https://github.com/ctrlplusb/code-split-component#installation)
 - [Configuration](https://github.com/ctrlplusb/code-split-component#configuration)
 - [Usage](https://github.com/ctrlplusb/code-split-component#usage)
 - [Server Side Rendering Usage](https://github.com/ctrlplusb/code-split-component#server-side-rendering-usage)
 - [API](https://github.com/ctrlplusb/code-split-component#api)
 - [Combining with React Router](https://github.com/ctrlplusb/code-split-component#combining-with-react-router)

## About

This library consists of a set of React components, a Webpack plugin, and a Babel 6 plugin - the combination of which allows you to declaratively use Webpack's code splitting feature within your projects without heavy boilerplate code.

## Demo

Here is a live deployment of react-universally, an SSR starter kit that makes use of this library:

https://react-universally-gydkwwudrb.now.sh

Check the network tab to see it in action. :)

## Installation

Note: this library is in alpha status on the v2 rewrite.  Although it's alpha I highly recommend that you install the latest alpha.  The v1 API is considered inefficient and has been deprecated.

```
npm install code-split-component@2.0.0-alpha.5 --save
```

## Configuration

Before you can use the components, you need to add the Babel and Webpack plugins to your build configuration.

Firstly add the Webpack plugin to your Webpack configuration like so:<commit_msg>Fixes demo link. closes #30<commit_after># ✂️ code-split-component

Declarative code splitting for your Wepback bundled React projects, with SSR support.

[![npm](https://img.shields.io/npm/v/code-split-component.svg?style=flat-square)](http://npm.im/code-split-component)
[![MIT License](https://img.shields.io/npm/l/code-split-component.svg?style=flat-square)](http://opensource.org/licenses/MIT)
[![Travis](https://img.shields.io/travis/ctrlplusb/code-split-component.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/code-split-component)
[![Codecov](https://img.shields.io/codecov/c/github/ctrlplusb/code-split-component.svg?style=flat-square)](https://codecov.io/github/ctrlplusb/code-split-component)

```jsx

import { CodeSplit } from 'code-split-component';

<CodeSplit chunkName="foo" modules={{ Foo: require('../Foo') }}>
  { ({ Foo }) => Foo && <Foo /> }
</CodeSplit>
```

## TOCs

 - [About](https://github.com/ctrlplusb/code-split-component#about)
 - [Demo](https://github.com/ctrlplusb/code-split-component#demo)
 - [Installation](https://github.com/ctrlplusb/code-split-component#installation)
 - [Configuration](https://github.com/ctrlplusb/code-split-component#configuration)
 - [Usage](https://github.com/ctrlplusb/code-split-component#usage)
 - [Server Side Rendering Usage](https://github.com/ctrlplusb/code-split-component#server-side-rendering-usage)
 - [API](https://github.com/ctrlplusb/code-split-component#api)
 - [Combining with React Router](https://github.com/ctrlplusb/code-split-component#combining-with-react-router)

## About

This library consists of a set of React components, a Webpack plugin, and a Babel 6 plugin - the combination of which allows you to declaratively use Webpack's code splitting feature within your projects without heavy boilerplate code.

## Demo

Here is a live deployment of react-universally, an SSR starter kit that makes use of this library:

https://react-universally.now.sh

Check the network tab to see it in action. :)

## Installation

Note: this library is in alpha status on the v2 rewrite.  Although it's alpha I highly recommend that you install the latest alpha.  The v1 API is considered inefficient and has been deprecated.

```
npm install code-split-component@2.0.0-alpha.5 --save
```

## Configuration

Before you can use the components, you need to add the Babel and Webpack plugins to your build configuration.

Firstly add the Webpack plugin to your Webpack configuration like so:
{'fraction_non_alphanumeric': 0.14250962902898845, 'fraction_numerical': 0.003243462396107845, 'mean_word_length': 4.880810488676996, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, 'https://': 30, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5573707', 'n_tokens_mistral': 1582, 'n_tokens_neox': 1517, 'n_words': 371}