How to split code? #271

pksjce · 2016-10-23T05:51:32Z

Trying to tackle #3 with this.

bebraw · 2016-10-23T06:20:49Z

content/how-to/code-splitting/splitting-css.md

+  - pksjce
+---
+
+In `webpack`, when you use the css loader and import css into your javascript files, the css is bundled along with your javascript.


Just webpack to be consistent with other docs.

javascript -> JavaScript

css -> CSS

bebraw · 2016-10-23T06:21:32Z

content/how-to/code-splitting/splitting-css.md

+
+## Using `css-loader`
+
+To import css into your javascript code like [any other module](concept/modules), you will have to use the [css-loader](https://github.com/webpack/css-loader)


/s/javascript/JavaScript

bebraw · 2016-10-23T06:22:00Z

content/how-to/code-splitting/splitting-css.md

+
+```javascript
+...
+loader: ExtractPlugin.extract('css-loader?sourceMap') //Can be used without sourcemaps too.


The syntax has changed in webpack 2.

Need to put these changes in the upgrade document too right?

Yup. It's a breaking change.

bebraw · 2016-10-23T06:22:26Z

content/how-to/code-splitting/splitting-css.md

+### In the plugin
+
+```javascript
+new ExtractPlugin({ filename: 'bundle.css', disable: false, allChunks: true })


Why ExtractPlugin instead of ExtractTextPlugin?

No reason particularly. Changed it.

SpaceK33z · 2016-10-23T08:39:03Z

content/how-to/code-splitting/splitting-css.md

+
+In webpack, when you use the css-loader and import CSS into your Javascript files, the CSS is bundled along with your Javascript.
+This has the disadvantage that, you will not be able to utilize the browser's ability to load CSS asynchronously and parallely. Instead, your page will have to wait until your whole Javascript bundle is loaded, to style itself.
+webpack can help with this problem by bundling the CSS separately using [Extract-Text-Webpack-Plugin](https://github.com/webpack/extract-text-webpack-plugin) and the [css-loader](https://github.com/webpack/css-loader)


Forgot a dot in the end.

SpaceK33z · 2016-10-23T08:40:09Z

content/how-to/split-code.md

-> see also [[Output]]
-> see also [[dynamic dependencies]]
+
+Code splitting is the most compelling feature for  `webpack` usage. `webpack`, with some configuration, can tweak your app such that, you can split your code into various bundles and load them on demand.


Two spaces before webpack.

Can you take another look at the second sentence? It has too many comma's in it, making it a bit hard to read.

SpaceK33z · 2016-10-23T08:42:18Z

content/how-to/split-code.md

+
+#### CSS splitting
+
+An application owner would want to split all the css into a separate bundle. This enhances caheability of the resource bundle and also allows the browser to parallely load the bundle which makes for a solid performance improvement.


caheability -> cacheability

bebraw · 2016-10-25T10:20:43Z

content/how-to/code-splitting/splitting-css.md

+  - pksjce
+---
+
+In webpack, when you use the css-loader and import CSS into your Javascript files, the CSS is bundled along with your Javascript.


/s/Javascript/JavaScript

bebraw · 2016-10-25T10:20:58Z

content/how-to/code-splitting/splitting-css.md

+---
+
+In webpack, when you use the css-loader and import CSS into your Javascript files, the CSS is bundled along with your Javascript.
+This has the disadvantage that, you will not be able to utilize the browser's ability to load CSS asynchronously and parallely. Instead, your page will have to wait until your whole Javascript bundle is loaded, to style itself.


/s/parallely/parallel

/s/Javascript/JavaScript

bebraw · 2016-10-25T10:21:26Z

content/how-to/code-splitting/splitting-css.md

+
+In webpack, when you use the css-loader and import CSS into your Javascript files, the CSS is bundled along with your Javascript.
+This has the disadvantage that, you will not be able to utilize the browser's ability to load CSS asynchronously and parallely. Instead, your page will have to wait until your whole Javascript bundle is loaded, to style itself.
+webpack can help with this problem by bundling the CSS separately using [Extract-Text-Webpack-Plugin](https://github.com/webpack/extract-text-webpack-plugin) and the [css-loader](https://github.com/webpack/css-loader).


Maybe lower case extract-text-webpack-plugin.

bebraw · 2016-10-25T10:21:33Z

content/how-to/code-splitting/splitting-css.md

+
+## Using `css-loader`
+
+To import css into your Javascript code like [any other module](concept/modules), you will have to use the [css-loader](https://github.com/webpack/css-loader)


bebraw · 2016-10-25T10:21:51Z

content/how-to/code-splitting/splitting-css.md

+## Using `css-loader`
+
+To import css into your Javascript code like [any other module](concept/modules), you will have to use the [css-loader](https://github.com/webpack/css-loader)
+The webpack config with `css-loader` will look somewhat like


I would rephrase this and drop "somewhat".

bebraw · 2016-10-25T10:29:23Z

content/how-to/code-splitting/splitting-vendor.md

+
+It is for this reason, that we will need to use the [CommonsChunkPlugin](https://github.com/webpack/webpack/blob/master/lib/optimize/CommonsChunkPlugin.js).
+
+### CommonsChunkPlugin


Header level + missing formatting.

bebraw · 2016-10-25T10:29:49Z

content/how-to/code-splitting/splitting-vendor.md

+
+On running `webpack` now, we see that two bundles have been created. If you inspect these though, you will find that the code for `moment` is present in both the files!
+
+It is for this reason, that we will need to use the [CommonsChunkPlugin](https://github.com/webpack/webpack/blob/master/lib/optimize/CommonsChunkPlugin.js).


This link can break if the source changes. Maybe link to a hash (specific commit). Not sure.

Not sure what exactly to do. Shall I remove the link?

You could add plugins/commons-chunk-plugin.md stub and link to it instead.

bebraw · 2016-10-25T10:30:05Z

content/how-to/code-splitting/splitting-vendor.md

+```
+Now run `webpack` on your application. Bundle inspection shows that `moment` code is present only in the vendor bundle.
+
+### Manifest file


Manifest File. See also the rest.

bebraw · 2016-10-25T10:30:31Z

content/how-to/code-splitting/splitting-vendor.md

+To prevent this, we need extract out the runtime into a separate manifest file. Even though we are creating another bundle, the overhead is offset by the long term caching benefits that we obtain on the `vendor` file.
+
+```javascript
+\\ webpack.config.js


Push filenames outside of the examples so you get something like this:

webpack.config.js

demo goes here

bebraw · 2016-10-25T10:30:57Z

content/how-to/split-code.md

+
+`require.ensure()` is the CommonJS way of including assets asynchronously. By adding `require.ensure([<fileurl>])`, we can define a split point in the code. webpack can then create a separate bundle of all the code inside this split point.
+Learn [how to split your code using `require.ensure()`](/how-to/code-splitting/splitting-require)
+### Code splitting with System.import


Add TODOs (?>) here so we won't forget to document these.

bebraw · 2016-10-26T06:43:39Z

Can you rebase? I'll merge after that.

pksjce · 2016-10-26T09:05:26Z

Done!

pksjce changed the title ~~Feat/code splitting~~ How to split code? Oct 23, 2016

bebraw reviewed Oct 23, 2016

View reviewed changes

SpaceK33z reviewed Oct 23, 2016

View reviewed changes

bebraw reviewed Oct 25, 2016

View reviewed changes

Pavithra K added 14 commits October 26, 2016 14:21

Adds docs for css-splitting

7ce5f75

Adds separate article for css splitting

d888b0d

Adds review comments

e777c55

Adds new syntax to extract text plugin

a94b9a8

Adds review comments

11bbc15

Inits code splitting with require.ensure

39a4c6c

Adds require.ensure doc [WIP]

42c8fec

Fixes headings

62dbb21

Adds docs for vendor splitting

c19c777

Completes require.ensure docs

0d1eddc

Adds review comments on formatting

d1b828e

Adds formatting fix

8a02076

Adds link for commonchunks plugin

f366a73

Links to plugin page

2d59b6d

bebraw merged commit db78115 into webpack:develop Oct 26, 2016


		## Using `css-loader`

		To import css into your javascript code like [any other module](concept/modules), you will have to use the [css-loader](https://github.com/webpack/css-loader)


		#### CSS splitting

		An application owner would want to split all the css into a separate bundle. This enhances caheability of the resource bundle and also allows the browser to parallely load the bundle which makes for a solid performance improvement.


		It is for this reason, that we will need to use the [CommonsChunkPlugin](https://github.com/webpack/webpack/blob/master/lib/optimize/CommonsChunkPlugin.js).

		### CommonsChunkPlugin


		On running `webpack` now, we see that two bundles have been created. If you inspect these though, you will find that the code for `moment` is present in both the files!

		It is for this reason, that we will need to use the [CommonsChunkPlugin](https://github.com/webpack/webpack/blob/master/lib/optimize/CommonsChunkPlugin.js).

Uh oh!

How to split code? #271

How to split code? #271

Uh oh!

Conversation

pksjce commented Oct 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SpaceK33z Oct 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bebraw commented Oct 26, 2016

Uh oh!

pksjce commented Oct 26, 2016

Uh oh!

Uh oh!

pksjce commented Oct 23, 2016 •

edited

Loading

SpaceK33z Oct 23, 2016 •

edited

Loading