You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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`,
38
44
39
45
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.
40
46
41
-
### Customizing the Runtime Chunk Path (`manifest.js`)
47
+
### Customize the Runtime Chunk Path
42
48
43
49
By default, the runtime chunk (`manifest.js`) is generated next to your JS assets.
44
50
@@ -47,62 +53,61 @@ However, the path can easily be customized, relative to the public path:
47
53
```js
48
54
mix.options({ runtimeChunkPath:'custom' });
49
55
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`
51
57
```
52
58
53
-
If you'd prefer the public path for the manifest file, you may use `.`:
59
+
If you instead prefer the public path, use `.`.
54
60
55
61
```js
56
62
mix.js('resources/app.js', 'public/js');
57
63
mix.options({ runtimeChunkPath:'.' });
58
64
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`
60
66
```
61
67
62
-
### Multiple extractions
68
+
### Multiple Extractions
63
69
64
70
You may call `mix.extract(['library1', 'library2'])` multiple times with different arguments to extract different sets of libraries into separate files.
// `vendor~utils-1.js` will contain Vue and Lodash
71
77
// `vendor~utils-2.js` will contain jQuery and Axios
72
78
```
73
79
74
-
### Fallback extractions
80
+
### Fallback Extractions
75
81
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`.
// `vendor~utils-1.js` will contain Vue and Lodash
84
90
// `vendor~utils-2.js` will contain jQuery and Axios
85
91
// `vendor.js` will contain all other used libraries from node_modules
86
92
```
87
93
88
-
###Regular expression extractions
94
+
#### Extractions Using Regular Expressions
89
95
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()`.
91
97
92
98
```js
93
99
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`
95
101
to:'js/vendor-d3.js',
96
102
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
99
104
libraries:/d3|d3-[a-z0-9-]+/
100
105
});
101
106
```
102
107
103
-
### Custom extraction tests
108
+
####Custom Extraction Tests
104
109
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.
0 commit comments