diff --git a/src/node/build.ts b/src/node/build.ts index 8b9e1fe1343135..3a921b3023c33e 100644 --- a/src/node/build.ts +++ b/src/node/build.ts @@ -15,7 +15,7 @@ import { Options } from 'rollup-plugin-vue' import { createBuildResolvePlugin } from './buildPluginResolve' import { createBuildHtmlPlugin, scriptRE } from './buildPluginHtml' import { createBuildCssPlugin } from './buildPluginCss' -import { createBuildAssetPlugin } from './buildPluginAsset' +import { AssetsOptions, createBuildAssetPlugin } from './buildPluginAsset' import { isExternalUrl } from './utils' export interface BuildOptions { @@ -42,6 +42,10 @@ export interface BuildOptions { * Defaults to `assets` */ assetsDir?: string + /** + * The option with process assets. eg.image + */ + assetsOptions?: AssetsOptions /** * List files that are included in the build, but not inside project root. * e.g. if you are building a higher level tool on top of vite and includes @@ -107,6 +111,7 @@ export async function build(options: BuildOptions = {}): Promise { cdn = !resolveVue(root).hasLocalVue, outDir = path.resolve(root, 'dist'), assetsDir = 'assets', + assetsOptions = {}, resolvers = [], srcRoots = [], rollupInputOptions = {}, @@ -185,9 +190,9 @@ export async function build(options: BuildOptions = {}): Promise { __DEV__: 'false' }), // vite:css - createBuildCssPlugin(root, assetsDir, cssFileName, minify), + createBuildCssPlugin(root, assetsDir, cssFileName, minify, assetsOptions), // vite:asset - createBuildAssetPlugin(assetsDir), + createBuildAssetPlugin(assetsDir, assetsOptions), // minify with terser // modules: true and toplevel: true are implied with format: 'es' ...(minify ? [require('rollup-plugin-terser').terser()] : []) diff --git a/src/node/buildPluginAsset.ts b/src/node/buildPluginAsset.ts index 4b4e962b6512c3..241542155fe310 100644 --- a/src/node/buildPluginAsset.ts +++ b/src/node/buildPluginAsset.ts @@ -8,10 +8,19 @@ import mime from 'mime-types' const debug = require('debug')('vite:build:asset') -// TODO make this configurable -const inlineThreshold = 4096 +export interface AssetsOptions { + inlineThreshold?: number +} + +const defaultAssetsOptions: AssetsOptions = { + inlineThreshold: 4096 +} -export const getAssetPublicPath = async (id: string, assetsDir: string) => { +export const getAssetPublicPath = async ( + id: string, + assetsDir: string, + assetsOptions: AssetsOptions +) => { const ext = path.extname(id) const baseName = path.basename(id, ext) const resolvedFileName = `${baseName}.${hash_sum(id)}${ext}` @@ -19,7 +28,7 @@ export const getAssetPublicPath = async (id: string, assetsDir: string) => { let url = slash(path.join('/', assetsDir, resolvedFileName)) const content = await fs.readFile(id) if (!id.endsWith(`.svg`)) { - if (content.length < inlineThreshold) { + if (content.length < assetsOptions.inlineThreshold!) { url = `data:${mime.lookup(id)};base64,${content.toString('base64')}` } } @@ -45,16 +54,20 @@ export const registerAssets = ( } } -export const createBuildAssetPlugin = (assetsDir: string): Plugin => { +export const createBuildAssetPlugin = ( + assetsDir: string, + assetsOptions: AssetsOptions +): Plugin => { const assets = new Map() - + assetsOptions = { ...defaultAssetsOptions, ...assetsOptions } return { name: 'vite:asset', async load(id) { if (isStaticAsset(id)) { const { fileName, content, url } = await getAssetPublicPath( id, - assetsDir + assetsDir, + assetsOptions ) assets.set(fileName, content) debug(`${id} -> ${url}`) diff --git a/src/node/buildPluginCss.ts b/src/node/buildPluginCss.ts index 2eff224b8e8d10..d92500431804c5 100644 --- a/src/node/buildPluginCss.ts +++ b/src/node/buildPluginCss.ts @@ -1,6 +1,10 @@ import path from 'path' import { Plugin } from 'rollup' -import { getAssetPublicPath, registerAssets } from './buildPluginAsset' +import { + AssetsOptions, + getAssetPublicPath, + registerAssets +} from './buildPluginAsset' import { loadPostcssConfig } from './config' import { isExternalUrl } from './utils' @@ -12,7 +16,8 @@ export const createBuildCssPlugin = ( root: string, assetsDir: string, cssFileName: string, - minify: boolean + minify: boolean, + assetsOptions: AssetsOptions ): Plugin => { const styles: Map = new Map() const assets = new Map() @@ -40,7 +45,8 @@ export const createBuildCssPlugin = ( const file = path.join(fileDir, rawUrl) const { fileName, content, url } = await getAssetPublicPath( file, - assetsDir + assetsDir, + assetsOptions ) assets.set(fileName, content) debug(`url(${rawUrl}) -> url(${url})`)