| 
									
										
										
										
											2015-05-22 04:36:16 +08:00
										 |  |  | This example illustrates a very simple case of Code Splitting with `require.ensure`. | 
					
						
							| 
									
										
										
										
											2014-07-24 17:29:49 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2015-05-22 04:36:16 +08:00
										 |  |  | * `a` and `b` are required normally via CommonJS | 
					
						
							| 
									
										
										
										
											2016-03-25 01:45:18 +08:00
										 |  |  | * `c` is depended through the `require.ensure` array. | 
					
						
							| 
									
										
										
										
											2014-07-24 17:29:49 +08:00
										 |  |  |   * This means: make it available, but don't execute it | 
					
						
							|  |  |  |   * webpack will load it on demand | 
					
						
							|  |  |  | * `b` and `d` are required via CommonJs in the `require.ensure` callback | 
					
						
							|  |  |  |   * webpack detects that these are in the on-demand-callback and | 
					
						
							|  |  |  |   * will load them on demand | 
					
						
							|  |  |  |   * webpacks optimizer can optimize `b` away | 
					
						
							|  |  |  |     * as it is already available through the parent chunks | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | You can see that webpack outputs two files/chunks: | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2015-05-22 04:36:16 +08:00
										 |  |  | * `output.js` is the entry chunk and contains | 
					
						
							| 
									
										
										
										
											2014-07-24 17:29:49 +08:00
										 |  |  |   * the module system | 
					
						
							|  |  |  |   * chunk loading logic | 
					
						
							|  |  |  |   * the entry point `example.js` | 
					
						
							|  |  |  |   * module `a` | 
					
						
							|  |  |  |   * module `b` | 
					
						
							| 
									
										
										
										
											2018-09-25 23:08:35 +08:00
										 |  |  | * `1.output.js` is an additional chunk (on demand loaded) and contains | 
					
						
							| 
									
										
										
										
											2014-07-24 17:29:49 +08:00
										 |  |  |   * module `c` | 
					
						
							|  |  |  |   * module `d` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well. | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | # example.js
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ``` javascript | 
					
						
							|  |  |  | {{example.js}} | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-01-05 04:39:29 +08:00
										 |  |  | # dist/output.js
 | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ``` javascript | 
					
						
							| 
									
										
										
										
											2018-01-05 04:39:29 +08:00
										 |  |  | {{dist/output.js}} | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-09-25 23:08:35 +08:00
										 |  |  | # dist/1.output.js
 | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ``` javascript | 
					
						
							| 
									
										
										
										
											2018-09-25 23:08:35 +08:00
										 |  |  | {{dist/1.output.js}} | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Minimized | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ``` javascript | 
					
						
							| 
									
										
										
										
											2018-09-25 23:08:35 +08:00
										 |  |  | {{production:dist/1.output.js}} | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | # Info
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2017-12-14 17:09:09 +08:00
										 |  |  | ## Unoptimized
 | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | {{stdout}} | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2017-12-14 17:09:09 +08:00
										 |  |  | ## Production mode
 | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2017-12-14 17:09:09 +08:00
										 |  |  | {{production:stdout}} | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` |