| 
									
										
										
										
											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
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  | - `a` and `b` are required normally via CommonJS | 
					
						
							| 
									
										
										
										
											2020-02-28 23:00:42 +08:00
										 |  |  | - `c` is made available(,but doesn't get execute) through the `require.ensure` array. | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  |   - 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 | 
					
						
							| 
									
										
										
										
											2020-02-28 23:00:42 +08:00
										 |  |  |   - webpack's optimizer can optimize `b` away | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  |     - as it is already available through the parent chunks | 
					
						
							| 
									
										
										
										
											2014-07-24 17:29:49 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | You can see that webpack outputs two files/chunks: | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  | - `output.js` is the entry chunk and contains | 
					
						
							|  |  |  |   - the module system | 
					
						
							|  |  |  |   - chunk loading logic | 
					
						
							|  |  |  |   - the entry point `example.js` | 
					
						
							|  |  |  |   - module `a` | 
					
						
							|  |  |  |   - module `b` | 
					
						
							| 
									
										
										
										
											2020-02-28 23:00:42 +08:00
										 |  |  | - `1.output.js` is an additional chunk (on-demand loaded) and contains | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  |   - module `c` | 
					
						
							|  |  |  |   - module `d` | 
					
						
							| 
									
										
										
										
											2014-07-24 17:29:49 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | 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
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  | ```javascript | 
					
						
							|  |  |  | _{{example.js}}_ | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-01-05 04:39:29 +08:00
										 |  |  | # dist/output.js
 | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  | ```javascript | 
					
						
							|  |  |  | _{{dist/output.js}}_ | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-05-10 03:34:28 +08:00
										 |  |  | # dist/796.output.js
 | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  | ```javascript | 
					
						
							| 
									
										
										
										
											2019-05-10 03:34:28 +08:00
										 |  |  | _{{dist/796.output.js}}_ | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Minimized | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  | ```javascript | 
					
						
							| 
									
										
										
										
											2019-05-10 03:34:28 +08:00
										 |  |  | _{{production:dist/796.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
										 |  |  | 
 | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  | _{{stdout}}_ | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2017-12-14 17:09:09 +08:00
										 |  |  | ## Production mode
 | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2019-04-05 05:04:47 +08:00
										 |  |  | _{{production:stdout}}_ | 
					
						
							| 
									
										
										
										
											2012-04-05 20:59:01 +08:00
										 |  |  | ``` |