-
Notifications
You must be signed in to change notification settings - Fork 160
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
238 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './inlineChunk'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export type InlineChunkTestFunction = (params: { | ||
size: number; | ||
name: string; | ||
}) => boolean; | ||
|
||
export type InlineChunkTest = RegExp | InlineChunkTestFunction; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
# dev.inlineStyles | ||
|
||
- **Type:** | ||
|
||
```ts | ||
type InlineStyles = | ||
| boolean | ||
| RegExp | ||
| ((params: { size: number; name: string }) => boolean); | ||
``` | ||
|
||
- **Default:** `false` | ||
|
||
Whether to inline style files (.css files) into HTML with `<style>` tags in development mode. | ||
|
||
Note that, with this option on, the style files will no longer be linked from external, they will only exist inside the HTML file instead. | ||
|
||
### Example | ||
|
||
By default, we have following preview page: | ||
|
||
```html | ||
<html> | ||
<head> | ||
<link rel="stylesheet" href="/static/css/style.css" /> | ||
</head> | ||
<body></body> | ||
</html> | ||
``` | ||
|
||
After turn on the `dev.inlineStyles` option: | ||
|
||
```js | ||
export default { | ||
dev: { | ||
inlineStyles: true, | ||
}, | ||
}; | ||
``` | ||
|
||
The style file `/static/css/style.css` will be inlined in `index.html`: | ||
|
||
```html | ||
<html> | ||
<head> | ||
<style> | ||
/* content of /static/css/style.css */ | ||
</style> | ||
</head> | ||
<body></body> | ||
</html> | ||
``` | ||
|
||
### Using RegExp | ||
|
||
If you need to inline part of the CSS files, you can set `inlineStyles` to a regular expression that matches the URL of the CSS file that needs to be inlined. | ||
|
||
For example, to inline `main.css` into HTML, you can add the following configuration: | ||
|
||
```js | ||
export default { | ||
dev: { | ||
inlineStyles: /[\\/]main\.\w+\.css$/, | ||
}, | ||
}; | ||
``` | ||
|
||
### Using Function | ||
|
||
You can also set `dev.inlineStyles` to a function that accepts the following parameters: | ||
|
||
- `name`: The filename, such as `static/css/main.css`. | ||
- `size`: The file size in bytes. | ||
|
||
For example, if we want to inline assets that are smaller than 10kB, we can add the following configuration: | ||
|
||
```js | ||
export default { | ||
dev: { | ||
inlineStyles({ size }) { | ||
return size < 10 * 1000; | ||
}, | ||
}, | ||
}; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
# dev.inlineStyles | ||
|
||
- **类型:** | ||
|
||
```ts | ||
type InlineStyles = | ||
| boolean | ||
| RegExp | ||
| ((params: { size: number; name: string }) => boolean); | ||
``` | ||
|
||
- **默认值:** `false` | ||
|
||
用来控制开发环境中是否用 `<style>` 标签将 style 文件(.css 文件)inline 到 HTML 中。 | ||
|
||
注意,如果开启了这个选项,那么 style 将不会通过外联方式引入,而只会以 inline 样式的形式存在于 HTML 文件中。 | ||
|
||
### 示例 | ||
|
||
默认情况下,预览页面有如下结构: | ||
|
||
```html | ||
<html> | ||
<head> | ||
<link rel="stylesheet" href="/static/css/style.css" /> | ||
</head> | ||
<body></body> | ||
</html> | ||
``` | ||
|
||
开启 `dev.inlineStyles` 选项后: | ||
|
||
```js | ||
export default { | ||
dev: { | ||
inlineStyles: true, | ||
}, | ||
}; | ||
``` | ||
|
||
`/static/css/style.css` 文件将被 inline 到 `index.html` 中: | ||
|
||
```html | ||
<html> | ||
<head> | ||
<style> | ||
/* content of /static/css/style.css */ | ||
</style> | ||
</head> | ||
<body></body> | ||
</html> | ||
``` | ||
|
||
### 通过正则匹配 | ||
|
||
当你需要内联一部分 CSS 文件时,你可以将 `inlineStyles` 设置为一个正则表达式,匹配需要内联的 CSS 文件的 URL。 | ||
|
||
比如,将产物中的 `main.css` 内联到 HTML 中,你可以添加如下配置: | ||
|
||
```js | ||
export default { | ||
dev: { | ||
inlineStyles: /[\\/]main\.\w+\.css$/, | ||
}, | ||
}; | ||
``` | ||
|
||
### 通过函数匹配 | ||
|
||
你也可以将 `dev.inlineStyles` 设置为一个函数,函数接收以下参数: | ||
|
||
- `name`:文件名,比如 `static/css/main.css`。 | ||
- `size`:文件大小,单位为 byte。 | ||
|
||
比如,我们希望内联小于 10kB 的资源,可以添加如下配置: | ||
|
||
```js | ||
export default { | ||
dev: { | ||
inlineStyles({ size }) { | ||
return size < 10 * 1000; | ||
}, | ||
}, | ||
}; | ||
``` |