Skip to content

Commit 340925c

Browse files
committed
Tweak extract docs
1 parent 83b32c1 commit 340925c

File tree

1 file changed

+24
-19
lines changed

1 file changed

+24
-19
lines changed

docs/extract.md

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
# Code Splitting
22

33
- [Basic Usage](#basic-usage)
4+
- [Customize the Runtime Chunk Path](#customize-the-runtime-chunk-path)
5+
- [The Manifest File](#the-manifest-file)
6+
- [Multiple Extractions](#multiple-extractions)
7+
- [Fallback Extractions](#fallback-extractions)
8+
- [Extractions Using Regular Expressions](#extractions-using-regular-expressions)
9+
- [Custom Extraction Tests](#custom-extraction-tests)
410
- [The Manifest File](#the-manifest-file)
511

612
Bundling your JavaScript into a single file has one big downside: each time you change a minor detail in your application code, you must bust the browser cache. Even if you only change a single variable name, users will still need to re-download that generated file.
@@ -38,7 +44,7 @@ Once you compile your code - `npx mix` - you'll find three new files: `app.js`,
3844

3945
While it's true that we're now importing three scripts instead of one, the benefit is improved long-term caching of vendor code that rarely changes. Further, HTTP2 makes the cost of importing multiple scripts a non-issue.
4046

41-
### Customizing the Runtime Chunk Path (`manifest.js`)
47+
### Customize the Runtime Chunk Path
4248

4349
By default, the runtime chunk (`manifest.js`) is generated next to your JS assets.
4450

@@ -47,62 +53,61 @@ However, the path can easily be customized, relative to the public path:
4753
```js
4854
mix.options({ runtimeChunkPath: 'custom' });
4955

50-
// The `manifest.js` file can now be found at `public/custom/manifest.js`
56+
// The `manifest.js` file will now be saved to `public/custom/manifest.js`
5157
```
5258

53-
If you'd prefer the public path for the manifest file, you may use `.`:
59+
If you instead prefer the public path, use `.`.
5460

5561
```js
5662
mix.js('resources/app.js', 'public/js');
5763
mix.options({ runtimeChunkPath: '.' });
5864

59-
// The `manifest.js` file can now be found at `public/manifest.js`
65+
// The `manifest.js` file will now be saved to `public/manifest.js`
6066
```
6167

62-
### Multiple extractions
68+
### Multiple Extractions
6369

6470
You may call `mix.extract(['library1', 'library2'])` multiple times with different arguments to extract different sets of libraries into separate files.
6571

6672
```js
67-
mix.extract(['vue', 'lodash-es'], 'vendor~utils-1.js')
68-
mix.extract(['jquery', 'axios'], 'vendor~utils-2.js')
73+
mix.extract(['vue', 'lodash-es'], 'vendor~utils-1.js');
74+
mix.extract(['jquery', 'axios'], 'vendor~utils-2.js');
6975

7076
// `vendor~utils-1.js` will contain Vue and Lodash
7177
// `vendor~utils-2.js` will contain jQuery and Axios
7278
```
7379

74-
### Fallback extractions
80+
### Fallback Extractions
7581

76-
A call to `mix.extract()` may be paired with one or more calls to `mix.extract(['library1', 'library2'], 'file.js')` and all libraries not extracted into specific files will go into `vendor.js`.
82+
A call to `mix.extract()` may be paired with one or more calls to `mix.extract(['library1', 'library2'], 'file.js')` and all libraries not extracted into specific files will be saved to `vendor.js`.
7783

7884
```js
79-
mix.extract(['vue', 'lodash-es'], 'vendor~utils-1.js')
80-
mix.extract(['jquery', 'axios'], 'vendor~utils-2.js')
81-
mix.extract()
85+
mix.extract(['vue', 'lodash-es'], 'vendor~utils-1.js');
86+
mix.extract(['jquery', 'axios'], 'vendor~utils-2.js');
87+
mix.extract();
8288

8389
// `vendor~utils-1.js` will contain Vue and Lodash
8490
// `vendor~utils-2.js` will contain jQuery and Axios
8591
// `vendor.js` will contain all other used libraries from node_modules
8692
```
8793

88-
### Regular expression extractions
94+
#### Extractions Using Regular Expressions
8995

90-
It is now possible to match libraries by a regular expression. This is useful for libraries split into many modules/packages like D3. To utilize this feature you can now pass an object to `mix.extract()`.
96+
It is now possible to match libraries by a regular expression. This is useful for libraries split into many modules/packages, like D3. To leverage this feature, pass an object to `mix.extract()`.
9197

9298
```js
9399
mix.extract({
94-
// If you don't specify a location it defaults to `vendor.js`
100+
// If you don't specify a location, it defaults to `vendor.js`
95101
to: 'js/vendor-d3.js',
96102

97-
// This can be an array of strings
98-
// Or a regular expression
103+
// This can be an array of strings or a regular expression
99104
libraries: /d3|d3-[a-z0-9-]+/
100105
});
101106
```
102107

103-
### Custom extraction tests
108+
#### Custom Extraction Tests
104109

105-
If you need more control over module extractions you can pass a test function which will be passed directly to webpack and you'll have access to the webpack module object directly:
110+
If you require more control over how modules are extracted, include a `test` function that receives the webpack module object and returns a boolean.
106111

107112
```js
108113
mix.extract({

0 commit comments

Comments
 (0)