Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
Update example config where `outputOptions` was used instead of `output`.
  • Loading branch information
richardtallent authored Apr 7, 2021
1 parent 6ec8b96 commit 206bf7a
Showing 1 changed file with 15 additions and 4 deletions.
19 changes: 15 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Web applications running from a local file have some browser security limitation

## How do I use it?

Here's an example `vite.config.ts` file. The `cssCodeSplit` option results in all CSS being emitted as a single file, which `vite-plugin-singlefile` can then inline. The `assetsInlineLimit` ensures that even very large assets are inlined in your JavaScript. The `inlineDynamicImports` also ensures that as many resources as possible are inlined. The `manualChunks` option became necessary somewhere around Vite 2.0 release to prevent the creation of a separate `vendor.js` bundle.
Here's an example `vite.config.ts` file.

```ts
import { defineConfig } from "vite"
Expand All @@ -28,18 +28,29 @@ import { viteSingleFile } from "vite-plugin-singlefile"
export default defineConfig({
plugins: [vue(), viteSingleFile()],
build: {
cssCodeSplit: false,
target: "esnext",
assetsInlineLimit: 100000000,
chunkSizeWarningLimit: 100000000,
cssCodeSplit: false,
brotliSize: false,
rollupOptions: {
outputOptions: {
inlineDynamicImports: true,
inlineDynamicImports: true,
output: {
manualChunks: () => "everything.js",
},
},
},
})
```

- The `cssCodeSplit` option results in all CSS being emitted as a single file, which `vite-plugin-singlefile` can then inline.
- The `assetsInlineLimit` ensures that even very large assets are inlined in your JavaScript.
- The `inlineDynamicImports` also ensures that as many resources as possible are inlined.
- The `manualChunks` option became necessary somewhere around Vite 2.0 release to prevent the creation of a separate `vendor.js` bundle. `outputOptions` became just `output` some time after that.
- The `brotliSize` option just avoids the extra step of testing Brotli compression, which isn't really pertinent to a file served locally.
- The `chunkSizeWarningLimit` option just avoids the warnings about large chunks.
- The filename you choose for `manualChunks` ultimately doesn't matter, it will get rolled into `index.html` by the plugin.

### Caveats

- `favicon` resources are not inlined by Vite, and this plugin doesn't do that either.
Expand Down

0 comments on commit 206bf7a

Please sign in to comment.