diff --git a/e2e/cases/esm-exports/test.mjs b/e2e/cases/esm-exports/test.mjs index 148f398548..dbcf34c190 100644 --- a/e2e/cases/esm-exports/test.mjs +++ b/e2e/cases/esm-exports/test.mjs @@ -3,7 +3,6 @@ import { getBabelConfigForWeb } from '@rsbuild/babel-preset/web'; import { pluginAssetsRetry } from '@rsbuild/plugin-assets-retry'; import { pluginBabel } from '@rsbuild/plugin-babel'; import { pluginCheckSyntax } from '@rsbuild/plugin-check-syntax'; -import { pluginImageCompress } from '@rsbuild/plugin-image-compress'; import { pluginLess } from '@rsbuild/plugin-less'; import { pluginLightningcss } from '@rsbuild/plugin-lightningcss'; import { pluginPreact } from '@rsbuild/plugin-preact'; @@ -28,7 +27,6 @@ export default { pluginAssetsRetry, pluginBabel, pluginCheckSyntax, - pluginImageCompress, pluginLess, pluginReact, pluginPreact, diff --git a/e2e/cases/image-compress/index.test.ts b/e2e/cases/image-compress/index.test.ts deleted file mode 100644 index 238a86de94..0000000000 --- a/e2e/cases/image-compress/index.test.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { readFileSync } from 'node:fs'; -import { join } from 'node:path'; -import { build, globContentJSON } from '@e2e/helper'; -import { expect, test } from '@playwright/test'; - -test('should compress image with use plugin-image-compress', async () => { - await expect( - build({ - cwd: __dirname, - }), - ).resolves.toBeDefined(); - - const outputs = await globContentJSON(join(__dirname, 'dist')); - - const names = Object.keys(outputs); - - const jpeg = names.find((item) => item.endsWith('.jpeg'))!; - const png = names.find((item) => item.endsWith('.png'))!; - const svg = names.find((item) => item.endsWith('.svg'))!; - // const ico = names.find((item) => item.endsWith('.ico'))!; - - const assetsDir = join(__dirname, '../../assets'); - const originJpeg = readFileSync(join(assetsDir, 'image.jpeg'), 'utf-8'); - const originPng = readFileSync(join(assetsDir, 'image.png'), 'utf-8'); - const originSvg = readFileSync(join(assetsDir, 'mobile.svg'), 'utf-8'); - // const originIco = readFileSync(join(assetsDir, 'image.ico'), 'utf-8'); - - expect(outputs[jpeg].length).toBeLessThan(originJpeg.length); - expect(outputs[png].length).toBeLessThan(originPng.length); - expect(outputs[svg].length).toBeLessThan(originSvg.length); - // TODO ico file size is not less than origin - // expect(outputs[ico].length).toBeLessThan(originIco.length); -}); diff --git a/e2e/cases/image-compress/rsbuild.config.ts b/e2e/cases/image-compress/rsbuild.config.ts deleted file mode 100644 index 28b4efbeef..0000000000 --- a/e2e/cases/image-compress/rsbuild.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { pluginImageCompress } from '@rsbuild/plugin-image-compress'; - -export default { - plugins: [pluginImageCompress(['jpeg', 'png', 'ico', 'svg'])], -}; diff --git a/e2e/cases/image-compress/src/index.js b/e2e/cases/image-compress/src/index.js deleted file mode 100644 index 2659aa618a..0000000000 --- a/e2e/cases/image-compress/src/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import imageIco from '@assets/image.ico?url'; -import imageJpeg from '@assets/image.jpeg?url'; -import imagePng from '@assets/image.png?url'; -import imageSvg from '@assets/mobile.svg?url'; - -const images = [imageIco, imagePng, imageJpeg, imageSvg]; - -for (const image of images) { - const el = new Image(); - el.src = image; - document.body.appendChild(el); -} diff --git a/e2e/package.json b/e2e/package.json index bddf078e85..9632dcdcf4 100644 --- a/e2e/package.json +++ b/e2e/package.json @@ -26,7 +26,6 @@ "@rsbuild/plugin-assets-retry": "workspace:*", "@rsbuild/plugin-babel": "workspace:*", "@rsbuild/plugin-check-syntax": "workspace:*", - "@rsbuild/plugin-image-compress": "workspace:*", "@rsbuild/plugin-less": "workspace:*", "@rsbuild/plugin-lightningcss": "workspace:*", "@rsbuild/plugin-preact": "workspace:*", diff --git a/packages/core/src/configChain.ts b/packages/core/src/configChain.ts index 8e1516956e..a7b040cf09 100644 --- a/packages/core/src/configChain.ts +++ b/packages/core/src/configChain.ts @@ -164,8 +164,6 @@ export const CHAIN_ID = { SWC: 'swc', /** svgr */ SVGR: 'svgr', - /** plugin-image-compress svgo-loader */ - SVGO: 'svgo', /** yaml-loader */ YAML: 'yaml', /** babel-loader */ @@ -186,8 +184,6 @@ export const CHAIN_ID = { MINI_CSS_EXTRACT: 'mini-css-extract', /** resolve-url-loader */ RESOLVE_URL: 'resolve-url-loader', - /** plugin-image-compress.loader */ - IMAGE_COMPRESS: 'image-compress', }, /** Predefined plugins */ PLUGIN: { diff --git a/packages/plugin-image-compress/LICENSE b/packages/plugin-image-compress/LICENSE deleted file mode 100644 index 82d38c25b5..0000000000 --- a/packages/plugin-image-compress/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2023-present Bytedance, Inc. and its affiliates. - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/packages/plugin-image-compress/README.md b/packages/plugin-image-compress/README.md deleted file mode 100644 index 92531b7215..0000000000 --- a/packages/plugin-image-compress/README.md +++ /dev/null @@ -1,19 +0,0 @@ -

- Rsbuild Logo -

- -# Rsbuild - -The Rspack-based build tool. It's fast, out-of-the-box and extensible. - -## Documentation - -https://rsbuild.dev/ - -## Contributing - -Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md). - -## License - -Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE). diff --git a/packages/plugin-image-compress/modern.config.ts b/packages/plugin-image-compress/modern.config.ts deleted file mode 100644 index 006abf4e4a..0000000000 --- a/packages/plugin-image-compress/modern.config.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { configForDualPackage } from '@rsbuild/config/modern.config.ts'; - -export default configForDualPackage; diff --git a/packages/plugin-image-compress/package.json b/packages/plugin-image-compress/package.json deleted file mode 100644 index 466444c2a0..0000000000 --- a/packages/plugin-image-compress/package.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "@rsbuild/plugin-image-compress", - "version": "1.0.0-alpha.9", - "description": "Image compress plugin for Rsbuild", - "homepage": "https://rsbuild.dev", - "repository": { - "type": "git", - "url": "https://github.com/web-infra-dev/rsbuild", - "directory": "packages/plugin-image-compress" - }, - "license": "MIT", - "type": "module", - "exports": { - ".": { - "types": "./dist/index.d.ts", - "import": "./dist/index.js", - "require": "./dist/index.cjs" - } - }, - "main": "./dist/index.cjs", - "types": "./dist/index.d.ts", - "files": [ - "dist" - ], - "scripts": { - "build": "modern build", - "dev": "modern build --watch" - }, - "dependencies": { - "@napi-rs/image": "^1.9.2", - "svgo": "^3.3.2" - }, - "devDependencies": { - "@rsbuild/core": "workspace:*", - "@types/node": "18.x", - "typescript": "^5.5.2" - }, - "peerDependencies": { - "@rsbuild/core": "workspace:^1.0.0-alpha.9" - }, - "publishConfig": { - "access": "public", - "provenance": true, - "registry": "https://registry.npmjs.org/" - } -} diff --git a/packages/plugin-image-compress/src/index.ts b/packages/plugin-image-compress/src/index.ts deleted file mode 100644 index 3409068a12..0000000000 --- a/packages/plugin-image-compress/src/index.ts +++ /dev/null @@ -1,61 +0,0 @@ -import assert from 'node:assert'; -import type { RsbuildPlugin } from '@rsbuild/core'; -import { ImageMinimizerPlugin } from './minimizer'; -import { withDefaultOptions } from './shared/utils'; -import type { Codecs, Options } from './types'; - -export type PluginImageCompressOptions = Options[]; -export const DEFAULT_OPTIONS: Codecs[] = ['jpeg', 'png', 'ico']; - -export interface IPluginImageCompress { - (...options: Options[]): RsbuildPlugin; - (options: Options[]): RsbuildPlugin; -} - -const castOptions = (args: (Options | Options[])[]): Options[] => { - const head = args[0]; - // expect [['png', { use: 'jpeg' }]] - if (Array.isArray(head)) { - return head; - } - // expect ['png', { use: 'jpeg' }] - const ret: Options[] = []; - for (const arg of args) { - assert(!Array.isArray(arg)); - ret.push(arg); - } - return ret; -}; - -const normalizeOptions = (options: Options[]) => { - const opts = options.length ? options : DEFAULT_OPTIONS; - const normalized = opts.map((opt) => withDefaultOptions(opt)); - return normalized; -}; - -export const PLUGIN_IMAGE_COMPRESS_NAME = 'rsbuild:image-compress'; - -/** Options enable by default: {@link DEFAULT_OPTIONS} */ -export const pluginImageCompress: IPluginImageCompress = ( - ...args -): RsbuildPlugin => ({ - name: PLUGIN_IMAGE_COMPRESS_NAME, - - setup(api) { - const opts = normalizeOptions(castOptions(args)); - - api.modifyBundlerChain((chain, { isDev }) => { - if (isDev) { - return; - } - - chain.optimization.minimize(true); - - for (const opt of opts) { - chain.optimization - .minimizer(`image-compress-${opt.use}`) - .use(ImageMinimizerPlugin, [opt]); - } - }); - }, -}); diff --git a/packages/plugin-image-compress/src/minimizer.ts b/packages/plugin-image-compress/src/minimizer.ts deleted file mode 100644 index 3a2d7231c2..0000000000 --- a/packages/plugin-image-compress/src/minimizer.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { Buffer } from 'node:buffer'; -import type { Rspack } from '@rsbuild/core'; -import Codecs from './shared/codecs'; -import type { FinalOptions } from './types'; - -export const IMAGE_MINIMIZER_PLUGIN_NAME = - '@rsbuild/plugin-image-compress/minimizer' as const; - -export interface MinimizedResult { - source: Rspack.sources.RawSource; -} - -export class ImageMinimizerPlugin { - name: string = IMAGE_MINIMIZER_PLUGIN_NAME; - - options: FinalOptions; - - constructor(options: FinalOptions) { - this.options = options; - } - - async optimize( - compiler: Rspack.Compiler, - compilation: Rspack.Compilation, - assets: Record, - ): Promise { - const cache = compilation.getCache(IMAGE_MINIMIZER_PLUGIN_NAME); - const { RawSource } = compiler.webpack.sources; - const { matchObject } = compiler.webpack.ModuleFilenameHelpers; - - const buildError = (error: unknown, file?: string, context?: string) => { - const cause = error instanceof Error ? error : new Error(); - const message = - file && context - ? `"${file}" in "${context}" from Image Minimizer:\n${cause.message}` - : cause.message; - const ret = new compiler.webpack.WebpackError(message); - - if (error instanceof Error) { - (ret as any).error = error; - } - - return ret; - }; - - const codec = Codecs[this.options.use]; - if (!codec) { - compilation.errors.push( - buildError(new Error(`Codec ${this.options.use} is not supported`)), - ); - } - const opts = { ...codec.defaultOptions, ...this.options }; - - const handleAsset = async (name: string) => { - const info = compilation.getAsset(name)?.info; - const fileName = name.split('?')[0]; - - // 1. Skip double minimize assets from child compilation - // 2. Test file by options (e.g. test, include, exclude) - if (info?.minimized || !matchObject(opts, fileName)) { - return; - } - - const { source: inputSource } = compilation.getAsset(name)!; - - const eTag = cache.getLazyHashedEtag(inputSource); - const cacheItem = cache.getItemCache(name, eTag); - let result = await cacheItem.getPromise(); - - try { - if (!result) { - const input = inputSource.source(); - const buf = await codec.handler(Buffer.from(input), opts); - result = { source: new RawSource(buf) }; - await cacheItem.storePromise(result); - } - compilation.updateAsset(name, result.source, { minimized: true }); - } catch (error) { - compilation.errors.push(buildError(error, name, compiler.context)); - } - }; - const promises = Object.keys(assets).map((name) => handleAsset(name)); - await Promise.all(promises); - } - - apply(compiler: Rspack.Compiler): void { - const handleCompilation = (compilation: Rspack.Compilation) => { - compilation.hooks.processAssets.tapPromise( - { - name: this.name, - stage: - compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE, - // @ts-expect-error unsupported by Rspack - additionalAssets: true, - }, - (assets) => this.optimize(compiler, compilation, assets), - ); - - compilation.hooks.statsPrinter.tap(this.name, (stats) => { - stats.hooks.print - .for('asset.info.minimized') - .tap( - '@rsbuild/plugin-image-compress', - (minimized, { green, formatFlag }) => - minimized && green && formatFlag - ? green(formatFlag('minimized')) - : '', - ); - }); - }; - compiler.hooks.compilation.tap(this.name, handleCompilation); - } -} diff --git a/packages/plugin-image-compress/src/shared/codecs.ts b/packages/plugin-image-compress/src/shared/codecs.ts deleted file mode 100644 index 32c46b1f80..0000000000 --- a/packages/plugin-image-compress/src/shared/codecs.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { Buffer } from 'node:buffer'; -import { - Transformer, - compressJpeg, - losslessCompressPng, - pngQuantize, -} from '@napi-rs/image'; -import svgo from 'svgo'; -import type { Codec, Codecs } from '../types'; - -export const jpegCodec: Codec<'jpeg'> = { - handler(buf, options) { - return compressJpeg(buf, options); - }, - defaultOptions: { - test: /\.(?:jpg|jpeg)$/, - }, -}; - -export const pngCodec: Codec<'png'> = { - handler(buf, options) { - return pngQuantize(buf, options); - }, - defaultOptions: { - test: /\.png$/, - }, -}; - -export const pngLosslessCodec: Codec<'pngLossless'> = { - handler(buf, options) { - return losslessCompressPng(buf, options); - }, - defaultOptions: { - test: /\.png$/, - }, -}; - -export const icoCodec: Codec<'ico'> = { - handler(buf) { - return new Transformer(buf).ico(); - }, - defaultOptions: { - test: /\.(?:ico|icon)$/, - }, -}; - -export const svgCodec: Codec<'svg'> = { - async handler(buf, options) { - const result = svgo.optimize(buf.toString(), options); - return Buffer.from(result.data); - }, - defaultOptions: { - test: /\.svg$/, - }, -}; - -const codecs: Record> = { - jpeg: jpegCodec, - png: pngCodec, - pngLossless: pngLosslessCodec, - ico: icoCodec, - svg: svgCodec, -}; - -export default codecs; diff --git a/packages/plugin-image-compress/src/shared/utils.ts b/packages/plugin-image-compress/src/shared/utils.ts deleted file mode 100644 index c6d71d0995..0000000000 --- a/packages/plugin-image-compress/src/shared/utils.ts +++ /dev/null @@ -1,11 +0,0 @@ -import assert from 'node:assert'; -import type { FinalOptions, Options } from '../types'; -import codecs from './codecs'; - -export const withDefaultOptions = (opt: Options): FinalOptions => { - const options = typeof opt === 'string' ? { use: opt } : opt; - const { defaultOptions } = codecs[options.use]; - const ret = { ...defaultOptions, ...options }; - assert('test' in ret); - return ret; -}; diff --git a/packages/plugin-image-compress/src/types/index.ts b/packages/plugin-image-compress/src/types/index.ts deleted file mode 100644 index c9dde03c9e..0000000000 --- a/packages/plugin-image-compress/src/types/index.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type { Buffer } from 'node:buffer'; -import type { - JpegCompressOptions, - PNGLosslessOptions, - PngQuantOptions, -} from '@napi-rs/image'; -import type { Config as SvgoConfig } from 'svgo'; - -export type OneOrMany = T | T[]; - -export interface WebpTransformOptions { - quality?: number; -} - -export interface CodecBaseOptions { - jpeg: JpegCompressOptions; - png: PngQuantOptions; - pngLossless: PNGLosslessOptions; - ico: Record; - svg: SvgoConfig; -} - -export interface BaseCompressOptions { - use: T; - test?: OneOrMany; - include?: OneOrMany; - exclude?: OneOrMany; -} - -export type FinalOptionCollection = { - [K in Codecs]: BaseCompressOptions & CodecBaseOptions[K]; -}; - -export type FinalOptions = FinalOptionCollection[Codecs]; - -export interface Codec { - handler: (buf: Buffer, options: CodecBaseOptions[T]) => Promise; - defaultOptions: Omit; -} - -export type Codecs = keyof CodecBaseOptions; - -export type OptionCollection = { - [K in Codecs]: K | FinalOptionCollection[K]; -}; - -export type Options = OptionCollection[Codecs]; diff --git a/packages/plugin-image-compress/tests/__snapshots__/index.test.ts.snap b/packages/plugin-image-compress/tests/__snapshots__/index.test.ts.snap deleted file mode 100644 index 7f187e2e8d..0000000000 --- a/packages/plugin-image-compress/tests/__snapshots__/index.test.ts.snap +++ /dev/null @@ -1,65 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`plugin-image-compress > should accept \`...options: Options[]\` as parameter 1`] = ` -[ - ImageMinimizerPlugin { - "name": "@rsbuild/plugin-image-compress/minimizer", - "options": { - "test": /\\\\\\.\\(\\?:jpg\\|jpeg\\)\\$/, - "use": "jpeg", - }, - }, - ImageMinimizerPlugin { - "name": "@rsbuild/plugin-image-compress/minimizer", - "options": { - "test": /\\\\\\.png\\$/, - "use": "png", - }, - }, -] -`; - -exports[`plugin-image-compress > should accept \`options: Options[]\` as parameter 1`] = ` -[ - ImageMinimizerPlugin { - "name": "@rsbuild/plugin-image-compress/minimizer", - "options": { - "test": /\\\\\\.\\(\\?:jpg\\|jpeg\\)\\$/, - "use": "jpeg", - }, - }, - ImageMinimizerPlugin { - "name": "@rsbuild/plugin-image-compress/minimizer", - "options": { - "test": /\\\\\\.png\\$/, - "use": "png", - }, - }, -] -`; - -exports[`plugin-image-compress > should generate correct options 1`] = ` -[ - ImageMinimizerPlugin { - "name": "@rsbuild/plugin-image-compress/minimizer", - "options": { - "test": /\\\\\\.\\(\\?:jpg\\|jpeg\\)\\$/, - "use": "jpeg", - }, - }, - ImageMinimizerPlugin { - "name": "@rsbuild/plugin-image-compress/minimizer", - "options": { - "test": /\\\\\\.png\\$/, - "use": "png", - }, - }, - ImageMinimizerPlugin { - "name": "@rsbuild/plugin-image-compress/minimizer", - "options": { - "test": /\\\\\\.\\(\\?:ico\\|icon\\)\\$/, - "use": "ico", - }, - }, -] -`; diff --git a/packages/plugin-image-compress/tests/index.test.ts b/packages/plugin-image-compress/tests/index.test.ts deleted file mode 100644 index d42753499d..0000000000 --- a/packages/plugin-image-compress/tests/index.test.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { createRsbuild } from '@rsbuild/core'; -import { pluginImageCompress } from '../src'; - -process.env.NODE_ENV = 'production'; - -describe('plugin-image-compress', () => { - it('should generate correct options', async () => { - const rsbuild = await createRsbuild({ - rsbuildConfig: { - plugins: [pluginImageCompress()], - output: { - minify: false, - }, - }, - }); - const configs = await rsbuild.initConfigs(); - expect(configs[0].optimization?.minimizer).toMatchSnapshot(); - }); - - it('should accept `...options: Options[]` as parameter', async () => { - const rsbuild = await createRsbuild({ - rsbuildConfig: { - plugins: [pluginImageCompress('jpeg', { use: 'png' })], - output: { - minify: false, - }, - }, - }); - const configs = await rsbuild.initConfigs(); - expect(configs[0].optimization?.minimizer).toMatchSnapshot(); - }); - - it('should accept `options: Options[]` as parameter', async () => { - const rsbuild = await createRsbuild({ - rsbuildConfig: { - plugins: [pluginImageCompress(['jpeg', { use: 'png' }])], - output: { - minify: false, - }, - }, - }); - const configs = await rsbuild.initConfigs(); - expect(configs[0].optimization?.minimizer).toMatchSnapshot(); - }); -}); diff --git a/packages/plugin-image-compress/tests/tsconfig.json b/packages/plugin-image-compress/tests/tsconfig.json deleted file mode 100644 index a20c9af655..0000000000 --- a/packages/plugin-image-compress/tests/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "@rsbuild/config/tsconfig", - "compilerOptions": { - "baseUrl": "./", - "types": ["vitest/globals"] - }, - "include": ["./**/*.ts"] -} diff --git a/packages/plugin-image-compress/tsconfig.json b/packages/plugin-image-compress/tsconfig.json deleted file mode 100644 index c695a9910b..0000000000 --- a/packages/plugin-image-compress/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "@rsbuild/config/tsconfig", - "compilerOptions": { - "outDir": "./dist", - "baseUrl": "./", - "rootDir": "src", - "composite": true, - "isolatedDeclarations": true - }, - "references": [ - { - "path": "../core" - } - ], - "include": ["src"] -} diff --git a/packages/plugin-image-compress/vitest.config.ts b/packages/plugin-image-compress/vitest.config.ts deleted file mode 100644 index e092bf0531..0000000000 --- a/packages/plugin-image-compress/vitest.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import path from 'node:path'; -import { defineConfig } from 'vitest/config'; - -const config = defineConfig({ - resolve: { - alias: { - '~': path.resolve(__dirname), - '@': path.resolve(__dirname, 'src'), - }, - }, -}); - -export default config; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 37c4c282b3..e5201705d8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -109,9 +109,6 @@ importers: '@rsbuild/plugin-check-syntax': specifier: workspace:* version: link:../packages/plugin-check-syntax - '@rsbuild/plugin-image-compress': - specifier: workspace:* - version: link:../packages/plugin-image-compress '@rsbuild/plugin-less': specifier: link:../packages/plugin-less version: link:../packages/plugin-less @@ -939,25 +936,6 @@ importers: specifier: ^5.5.2 version: 5.5.2 - packages/plugin-image-compress: - dependencies: - '@napi-rs/image': - specifier: ^1.9.2 - version: 1.9.2 - svgo: - specifier: ^3.3.2 - version: 3.3.2 - devDependencies: - '@rsbuild/core': - specifier: link:../core - version: link:../core - '@types/node': - specifier: 18.x - version: 18.19.31 - typescript: - specifier: ^5.5.2 - version: 5.5.2 - packages/plugin-less: dependencies: deepmerge: @@ -2459,12 +2437,6 @@ packages: resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} engines: {node: '>=10.0.0'} - '@emnapi/core@1.1.1': - resolution: {integrity: sha512-eu4KjHfXg3I+UUR7vSuwZXpRo4c8h4Rtb5Lu2F7Z4JqJFl/eidquONEBiRs6viXKpWBC3BaJBy68xGJ2j56idw==} - - '@emnapi/runtime@1.1.1': - resolution: {integrity: sha512-3bfqkzuR1KLx57nZfjr2NLnFOobvyS0aTszaEGCGqmYMVDRaGvgIZbjGSV/MHSSmLgQ/b9JFHQ5xm5WRZYd+XQ==} - '@emotion/is-prop-valid@1.2.2': resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==} @@ -2872,84 +2844,6 @@ packages: '@module-federation/webpack-bundler-runtime@0.2.3': resolution: {integrity: sha512-L/jt2uJ+8dwYiyn9GxryzDR6tr/Wk8rpgvelM2EBeLIhu7YxCHSmSjQYhw3BTux9zZIr47d1K9fGjBFsVRd/SQ==} - '@napi-rs/image-android-arm64@1.9.2': - resolution: {integrity: sha512-DQNI06ukKqpF4eogz9zyxfU+GYp11TfDqSNWKmk/IRU2oiB0DEgskuj7ZzaKMPJWFRZjI86V233UrrNRh76h2Q==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [android] - - '@napi-rs/image-darwin-arm64@1.9.2': - resolution: {integrity: sha512-w+0X87sORbC2uDpH7NAdELOnvzhu3dB19h2oMaD+YIv/+CVXV5eK2PS3zkRgMLCinVtFOZFZK3dFbHU3kncCRw==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [darwin] - - '@napi-rs/image-darwin-x64@1.9.2': - resolution: {integrity: sha512-8SnFDcgUSoL6Y38lstXi5FYECD1f4dJqQe2UCTwciED8gZnpC8Pju7JYJWcYgHHXn1JnKP9T1lPlSaX+L56EgA==} - engines: {node: '>= 10'} - cpu: [x64] - os: [darwin] - - '@napi-rs/image-freebsd-x64@1.9.2': - resolution: {integrity: sha512-oS0+iSb8AekjaHgTZdARKceqTPxSokByLzNQ9vGf2lZlTwlRFmXGq4XYutyzqzRuLT3BATLwtGMXiguMEYMuUw==} - engines: {node: '>= 10'} - cpu: [x64] - os: [freebsd] - - '@napi-rs/image-linux-arm-gnueabihf@1.9.2': - resolution: {integrity: sha512-bsbZSvw3wa7yaLVvz4M5VhJaB9LmgjAL3W7rnmXaX5BgpaQImNDm9MrxPG8ennr9Pbn6qDtCSioOz53ZgWUtgg==} - engines: {node: '>= 10'} - cpu: [arm] - os: [linux] - - '@napi-rs/image-linux-arm64-gnu@1.9.2': - resolution: {integrity: sha512-tiN9RMwEIcA8TodvmxdeJqsRdUGKAmxQ2aa0FkYjshdkmChG/sqUtUoL9LdmDf1tw1IACrSuT2Wj4LevxBdIJA==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - - '@napi-rs/image-linux-arm64-musl@1.9.2': - resolution: {integrity: sha512-w6Sx1j9PtqO2bP3Jl6nuMryzxA3zsoc1U8u1H7AZketyhxXIxqVm0oGomZGs5Bgshzau45bcWinp6GWrlSwt6A==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - - '@napi-rs/image-linux-x64-gnu@1.9.2': - resolution: {integrity: sha512-yB/s9wNB/9YHpQ4TwN8NWMA1tEK1gPLQwtysa68yMdHczb+7BTCKCIYIHD9rUulyT1Q/VgLIJCUMoxve0pIoeg==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - - '@napi-rs/image-linux-x64-musl@1.9.2': - resolution: {integrity: sha512-x9dRlo27xYXonh+gZZTqQL4lAfi/lhi8K8LE2hczbZffqmXvWU7NuHSgPVVeU/nvcMMqw1Cjzn81h7ny44SLbQ==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - - '@napi-rs/image-wasm32-wasi@1.9.2': - resolution: {integrity: sha512-BeA1wzzIG4+tdAwXWaAjObBOC6SzIbq0IhykSQ1xCGvYwd8stsn7ktPRz5b55PDo+Doj65PCT4H/xUgFcSiLCw==} - engines: {node: '>=14.0.0'} - cpu: [wasm32] - - '@napi-rs/image-win32-ia32-msvc@1.9.2': - resolution: {integrity: sha512-JDJP04Hg9Qru5Pth4gfBkXz9hZd/otx6ymi2VTuSKDFjpJIjk4tyUr9+BIE1ghFCHDzeJGVe7CDGdF/NTA1xrg==} - engines: {node: '>= 10'} - cpu: [ia32] - os: [win32] - - '@napi-rs/image-win32-x64-msvc@1.9.2': - resolution: {integrity: sha512-baRyTED6FkTsPliSOH7x8TV/cyAST9y6L1ClSgSCVEx7+W8MKKig90fF302kEa2PwMAyrXM3Ytq9KuIC7xJ+eA==} - engines: {node: '>= 10'} - cpu: [x64] - os: [win32] - - '@napi-rs/image@1.9.2': - resolution: {integrity: sha512-CvTC3XL5/BzHaVkJOZy31xOJLNSY3rBuUIQixaE/LwEQNSUdaxWa9gUyUkC9lUekkUp26CzaLLj2w7l7bxB1ag==} - engines: {node: '>= 10'} - - '@napi-rs/wasm-runtime@0.2.3': - resolution: {integrity: sha512-e4qmGDzXu2MYjj/XiKSgJ7XS7Z83MYVRN1yYaYXeQNVEO56zmshqmzFaELfdb612sLq/GmiPfRIwSji+bIlyCw==} - '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -3461,9 +3355,6 @@ packages: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} - '@tybys/wasm-util@0.8.3': - resolution: {integrity: sha512-Z96T/L6dUFFxgFJ+pQtkPpne9q7i6kIPYCFnQBHSgSPV9idTsKfIhCss0h5iM9irweZCatkrdeP8yi5uM1eX6Q==} - '@types/acorn@4.0.6': resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} @@ -9204,16 +9095,6 @@ snapshots: '@discoveryjs/json-ext@0.5.7': {} - '@emnapi/core@1.1.1': - dependencies: - tslib: 2.6.2 - optional: true - - '@emnapi/runtime@1.1.1': - dependencies: - tslib: 2.6.2 - optional: true - '@emotion/is-prop-valid@1.2.2': dependencies: '@emotion/memoize': 0.8.1 @@ -9625,66 +9506,6 @@ snapshots: '@module-federation/runtime': 0.2.3 '@module-federation/sdk': 0.2.3 - '@napi-rs/image-android-arm64@1.9.2': - optional: true - - '@napi-rs/image-darwin-arm64@1.9.2': - optional: true - - '@napi-rs/image-darwin-x64@1.9.2': - optional: true - - '@napi-rs/image-freebsd-x64@1.9.2': - optional: true - - '@napi-rs/image-linux-arm-gnueabihf@1.9.2': - optional: true - - '@napi-rs/image-linux-arm64-gnu@1.9.2': - optional: true - - '@napi-rs/image-linux-arm64-musl@1.9.2': - optional: true - - '@napi-rs/image-linux-x64-gnu@1.9.2': - optional: true - - '@napi-rs/image-linux-x64-musl@1.9.2': - optional: true - - '@napi-rs/image-wasm32-wasi@1.9.2': - dependencies: - '@napi-rs/wasm-runtime': 0.2.3 - optional: true - - '@napi-rs/image-win32-ia32-msvc@1.9.2': - optional: true - - '@napi-rs/image-win32-x64-msvc@1.9.2': - optional: true - - '@napi-rs/image@1.9.2': - optionalDependencies: - '@napi-rs/image-android-arm64': 1.9.2 - '@napi-rs/image-darwin-arm64': 1.9.2 - '@napi-rs/image-darwin-x64': 1.9.2 - '@napi-rs/image-freebsd-x64': 1.9.2 - '@napi-rs/image-linux-arm-gnueabihf': 1.9.2 - '@napi-rs/image-linux-arm64-gnu': 1.9.2 - '@napi-rs/image-linux-arm64-musl': 1.9.2 - '@napi-rs/image-linux-x64-gnu': 1.9.2 - '@napi-rs/image-linux-x64-musl': 1.9.2 - '@napi-rs/image-wasm32-wasi': 1.9.2 - '@napi-rs/image-win32-ia32-msvc': 1.9.2 - '@napi-rs/image-win32-x64-msvc': 1.9.2 - - '@napi-rs/wasm-runtime@0.2.3': - dependencies: - '@emnapi/core': 1.1.1 - '@emnapi/runtime': 1.1.1 - '@tybys/wasm-util': 0.8.3 - optional: true - '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -10173,11 +9994,6 @@ snapshots: '@trysound/sax@0.2.0': {} - '@tybys/wasm-util@0.8.3': - dependencies: - tslib: 2.6.2 - optional: true - '@types/acorn@4.0.6': dependencies: '@types/estree': 1.0.5 diff --git a/website/docs/en/guide/migration/modern-builder.mdx b/website/docs/en/guide/migration/modern-builder.mdx index 3c773fc51d..91de7c48af 100644 --- a/website/docs/en/guide/migration/modern-builder.mdx +++ b/website/docs/en/guide/migration/modern-builder.mdx @@ -63,15 +63,15 @@ Rsbuild and Builder have incompatible plugin systems, so you need to replace Bui The following table shows the correspondence between Builder plugins and Rsbuild plugins: -| Builder | Rsbuild | -| ---------------------------------------- | ----------------------------------------------------------------------------------------------- | -| @modern-js/builder-plugin-vue | [@rsbuild/plugin-vue](/plugins/list/plugin-vue) | -| @modern-js/builder-plugin-vue2 | [@rsbuild/plugin-vue2](/plugins/list/plugin-vue2) | -| @modern-js/builder-plugin-stylus | [@rsbuild/plugin-stylus](/plugins/list/plugin-stylus) | -| @modern-js/builder-plugin-node-polyfill | [@rsbuild/plugin-node-polyfill](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | -| @modern-js/builder-plugin-image-compress | [@rsbuild/plugin-image-compress](/plugins/list/plugin-image-compress) | -| @modern-js/builder-plugin-swc | Enabled by default, no need to use | -| @modern-js/builder-plugin-esbuild | No longer supported | +| Builder | Rsbuild | +| ---------------------------------------- | ------------------------------------------------------------------------------------------------- | +| @modern-js/builder-plugin-vue | [@rsbuild/plugin-vue](/plugins/list/plugin-vue) | +| @modern-js/builder-plugin-vue2 | [@rsbuild/plugin-vue2](/plugins/list/plugin-vue2) | +| @modern-js/builder-plugin-stylus | [@rsbuild/plugin-stylus](/plugins/list/plugin-stylus) | +| @modern-js/builder-plugin-node-polyfill | [@rsbuild/plugin-node-polyfill](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | +| @modern-js/builder-plugin-image-compress | [@rsbuild/plugin-image-compress](https://github.com/rspack-contrib/rsbuild-plugin-image-compress) | +| @modern-js/builder-plugin-swc | Enabled by default, no need to use | +| @modern-js/builder-plugin-esbuild | No longer supported | For example, if you were using `@modern-js/builder-plugin-vue`, you need to first install `@rsbuild/plugin-vue`, then import the plugin in `rsbuild.config.ts` and add it to the `plugins` field. diff --git a/website/docs/en/guide/optimization/optimize-bundle.mdx b/website/docs/en/guide/optimization/optimize-bundle.mdx index 58fa238edd..e70455b011 100644 --- a/website/docs/en/guide/optimization/optimize-bundle.mdx +++ b/website/docs/en/guide/optimization/optimize-bundle.mdx @@ -98,7 +98,7 @@ export default { }; ``` -See details in [plugin-image-compress](/plugins/list/plugin-image-compress). +See details in [@rsbuild/plugin-image-compress](https://github.com/rspack-contrib/rsbuild-plugin-image-compress). ## Split Chunk diff --git a/website/docs/en/guide/start/features.mdx b/website/docs/en/guide/start/features.mdx index 19ac45295b..ebede5d8e7 100644 --- a/website/docs/en/guide/start/features.mdx +++ b/website/docs/en/guide/start/features.mdx @@ -98,7 +98,7 @@ Here are all the main features supported by Rsbuild. | Remove console | Optional feature, remove `console.[methodName]` in code |
  • [performance.removeConsole](/config/performance/remove-console)
| | Optimize moment.js size | Optional feature, remove the redundant locale files of moment.js |
  • [performance.removeMomentLocale](/config/performance/remove-moment-locale)
| | Component on-demand import | Optional feature, selectively import code and styles from component libraries |
  • [source.transformImport](/config/source/transform-import)
| -| Image compression | Optional feature, compress used image resources |
  • [Image Compress Plugin](/plugins/list/plugin-image-compress)
| +| Image compression | Optional feature, compress used image resources |
  • [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)
| | Preload | Optional feature, preemptively fetch and cache the target resource for current navigation |
  • [performance.preload](/config/performance/preload)
| | Prefetch | Optional feature, preemptively fetch and cache the target resource for a followup navigation |
  • [performance.prefetch](/config/performance/prefetch)
| | Preconnect | Optional feature, preemptively connect to the target resource's origin |
  • [performance.preconnect](/config/performance/preconnect)
| diff --git a/website/docs/en/guide/start/npm-packages.mdx b/website/docs/en/guide/start/npm-packages.mdx index 6c11c7a626..9c493ec42f 100644 --- a/website/docs/en/guide/start/npm-packages.mdx +++ b/website/docs/en/guide/start/npm-packages.mdx @@ -122,16 +122,6 @@ Stylus plugin that uses Stylus as the CSS preprocessor. - [Source Code](https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-stylus) - [Documentation](/plugins/list/plugin-stylus) -## @rsbuild/plugin-image-compress - -![](https://img.shields.io/npm/v/@rsbuild/plugin-image-compress?style=flat-square&colorA=564341&colorB=EDED91) - -Image Compress plugin used to compress image resources used in the project. - -- [npm](https://npmjs.com/package/@rsbuild/plugin-image-compress) -- [Source Code](https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-image-compress) -- [Documentation](/plugins/list/plugin-image-compress) - ## @rsbuild/plugin-check-syntax ![](https://img.shields.io/npm/v/@rsbuild/plugin-check-syntax?style=flat-square&colorA=564341&colorB=EDED91) diff --git a/website/docs/en/plugins/list/_meta.json b/website/docs/en/plugins/list/_meta.json index 81acfc5070..90fae1b17e 100644 --- a/website/docs/en/plugins/list/_meta.json +++ b/website/docs/en/plugins/list/_meta.json @@ -15,7 +15,6 @@ "plugin-stylus", "plugin-assets-retry", "plugin-type-check", - "plugin-image-compress", "plugin-lightningcss", "plugin-source-build", "plugin-styled-components", diff --git a/website/docs/en/plugins/list/index.mdx b/website/docs/en/plugins/list/index.mdx index 8923387cea..63977d0fc9 100644 --- a/website/docs/en/plugins/list/index.mdx +++ b/website/docs/en/plugins/list/index.mdx @@ -61,7 +61,7 @@ The following are common framework-agnostic plugins: - [Basic SSL Plugin](https://github.com/rspack-contrib/rsbuild-plugin-basic-ssl): Generate an untrusted, self-signed certificate for the HTTPS server. - [ESLint Plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint): Used to run ESLint checks during the compilation. - [Type Check Plugin](/plugins/list/plugin-type-check): Used to run TypeScript type checker on a separate process. -- [Image Compress Plugin](/plugins/list/plugin-image-compress): Compress the image resources used in the project. +- [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image assets. - [MDX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-mdx): Provide support for MDX. - [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill): Used to inject polyfills of Node core modules in the browser side. - [Lightning CSS Plugin](/plugins/list/plugin-lightningcss): Used to use LightningCSS as CSS transformer and minimizer. diff --git a/website/docs/en/plugins/list/plugin-image-compress.mdx b/website/docs/en/plugins/list/plugin-image-compress.mdx deleted file mode 100644 index 7bdc1a322e..0000000000 --- a/website/docs/en/plugins/list/plugin-image-compress.mdx +++ /dev/null @@ -1,72 +0,0 @@ -# Image Compress Plugin - -import { SourceCode } from 'rspress/theme'; - - - -With the image compression plugin, image resources used in the project can be compressed to reduce the size of the artifacts without affecting the visual appearance of the image. - -## Quick Start - -### Install Plugin - -You can install the plugin using the following command: - -import { PackageManagerTabs } from '@theme'; - - - -### Register Plugin - -You can register the plugin in the `rsbuild.config.ts` file: - -```ts title="rsbuild.config.ts" -import { pluginImageCompress } from '@rsbuild/plugin-image-compress'; - -export default { - plugins: [pluginImageCompress()], -}; -``` - -## Options - -The plugin accepts an array of compressor configuration options, each of which can be either a string or an object. The string can be the name of a built-in compressor and its default configuration enabled. -Or use the object format configuration and specify the compressor in the `use` field. The remaining fields of the object will be used as compressor configuration options. - -By default, the plugin will enable `jpeg`, `png`, `ico` image compressors, which are equivalent to the following two examples: - -```js -pluginImageCompress(['jpeg', 'png', 'ico']); -``` - -```js -pluginImageCompress([{ use: 'jpeg' }, { use: 'png' }, { use: 'ico' }]); -``` - -The default configuration can be overridden by specifying a configuration option. -For example, to allow the jpeg compressor to recognize new extension name and to set the quality of the png compressor. - -```js -pluginImageCompress([ - { use: 'jpeg', test: /\.(?:jpg|jpeg|jpe)$/ }, - { use: 'png', minQuality: 50 }, - 'ico', -]); -``` - -The default `png` compressor is lossy. -If you want to replace it with a lossless compressor, you can use the following configuration. - -```js -pluginImageCompress(['jpeg', 'pngLossless', 'ico']); -``` - -The list of configuration options will eventually be converted to the corresponding bundler loader configuration, so compressors follow the same bottom-to-top matching rule. - -For example, the `png` compressor will take precedence over the `pngLossless` compressor for the following configuration: - -```js -pluginImageCompress(['jpeg', 'pngLossless', 'ico', 'png']); -``` - -For more information on compressors, please visit [@napi-rs/image](https://image.napi.rs/docs). diff --git a/website/docs/zh/guide/migration/modern-builder.mdx b/website/docs/zh/guide/migration/modern-builder.mdx index 3bca377899..6c02401067 100644 --- a/website/docs/zh/guide/migration/modern-builder.mdx +++ b/website/docs/zh/guide/migration/modern-builder.mdx @@ -63,15 +63,15 @@ Rsbuild 和 Builder 的插件系统不兼容，因此需要将 Builder 的插件 下面是 Builder 插件和 Rsbuild 插件的对应关系： -| Builder | Rsbuild | -| ---------------------------------------- | ----------------------------------------------------------------------------------------------- | -| @modern-js/builder-plugin-vue | [@rsbuild/plugin-vue](/plugins/list/plugin-vue) | -| @modern-js/builder-plugin-vue2 | [@rsbuild/plugin-vue2](/plugins/list/plugin-vue2) | -| @modern-js/builder-plugin-stylus | [@rsbuild/plugin-stylus](/plugins/list/plugin-stylus) | -| @modern-js/builder-plugin-node-polyfill | [@rsbuild/plugin-node-polyfill](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | -| @modern-js/builder-plugin-image-compress | [@rsbuild/plugin-image-compress](/plugins/list/plugin-image-compress) | -| @modern-js/builder-plugin-swc | 默认生效，无须使用 | -| @modern-js/builder-plugin-esbuild | 不再支持 | +| Builder | Rsbuild | +| ---------------------------------------- | ------------------------------------------------------------------------------------------------- | +| @modern-js/builder-plugin-vue | [@rsbuild/plugin-vue](/plugins/list/plugin-vue) | +| @modern-js/builder-plugin-vue2 | [@rsbuild/plugin-vue2](/plugins/list/plugin-vue2) | +| @modern-js/builder-plugin-stylus | [@rsbuild/plugin-stylus](/plugins/list/plugin-stylus) | +| @modern-js/builder-plugin-node-polyfill | [@rsbuild/plugin-node-polyfill](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | +| @modern-js/builder-plugin-image-compress | [@rsbuild/plugin-image-compress](https://github.com/rspack-contrib/rsbuild-plugin-image-compress) | +| @modern-js/builder-plugin-swc | 默认生效，无须使用 | +| @modern-js/builder-plugin-esbuild | 不再支持 | 以 `@modern-js/builder-plugin-vue` 为例，你需要先安装 `@rsbuild/plugin-vue`，然后在 `rsbuild.config.ts` 中引入插件，并添加到 `plugins` 字段中。 diff --git a/website/docs/zh/guide/optimization/optimize-bundle.mdx b/website/docs/zh/guide/optimization/optimize-bundle.mdx index ee12ac2bde..1e037d0cfb 100644 --- a/website/docs/zh/guide/optimization/optimize-bundle.mdx +++ b/website/docs/zh/guide/optimization/optimize-bundle.mdx @@ -98,7 +98,7 @@ export default { }; ``` -详见 [Image Compress 插件](/plugins/list/plugin-image-compress)。 +详见 [@rsbuild/plugin-image-compress](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)。 ## 代码拆包 diff --git a/website/docs/zh/guide/start/features.mdx b/website/docs/zh/guide/start/features.mdx index 055d99f64e..7264c6d9bb 100644 --- a/website/docs/zh/guide/start/features.mdx +++ b/website/docs/zh/guide/start/features.mdx @@ -98,7 +98,7 @@ | 移除 console | 可选功能，移除代码中的 `console.[methodName]` |
  • [performance.removeConsole](/config/performance/remove-console)
| | 优化 moment.js 体积 | 可选功能，移除 moment.js 多余的 locale 文件 |
  • [performance.removeMomentLocale](/config/performance/remove-moment-locale)
| | 组件库按需引入 | 可选功能，按需引入组件库的代码和样式 |
  • [source.transformImport](/config/source/transform-import)
| -| 图片压缩 | 可选功能，对引用的图片资源进行压缩处理 |
  • [Image Compress 插件](/plugins/list/plugin-image-compress)
| +| 图片压缩 | 可选功能，对引用的图片资源进行压缩处理 |
  • [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)
| | Preload | 可选功能，对资源进行预加载 |
  • [performance.preload](/config/performance/preload)
| | Prefetch | 可选功能，对资源进行预获取 |
  • [performance.prefetch](/config/performance/prefetch)
| | Preconnect | 可选功能，对资源进行预连接 |
  • [performance.preconnect](/config/performance/preconnect)
| diff --git a/website/docs/zh/guide/start/npm-packages.mdx b/website/docs/zh/guide/start/npm-packages.mdx index 6b0d42281c..c94fd9dc9d 100644 --- a/website/docs/zh/guide/start/npm-packages.mdx +++ b/website/docs/zh/guide/start/npm-packages.mdx @@ -122,16 +122,6 @@ Stylus 插件，使用 Stylus 作为 CSS 预处理器。 - [源代码](https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-source-build) - [文档](/plugins/list/plugin-source-build) -## @rsbuild/plugin-image-compress - -![](https://img.shields.io/npm/v/@rsbuild/plugin-image-compress?style=flat-square&colorA=564341&colorB=EDED91) - -Image Compress 插件，将项目中用到的图片资源进行压缩处理。 - -- [npm](https://npmjs.com/package/@rsbuild/plugin-image-compress) -- [源代码](https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-image-compress) -- [文档](/plugins/list/plugin-image-compress) - ## @rsbuild/plugin-check-syntax ![](https://img.shields.io/npm/v/@rsbuild/plugin-check-syntax?style=flat-square&colorA=564341&colorB=EDED91) diff --git a/website/docs/zh/plugins/list/_meta.json b/website/docs/zh/plugins/list/_meta.json index 81acfc5070..90fae1b17e 100644 --- a/website/docs/zh/plugins/list/_meta.json +++ b/website/docs/zh/plugins/list/_meta.json @@ -15,7 +15,6 @@ "plugin-stylus", "plugin-assets-retry", "plugin-type-check", - "plugin-image-compress", "plugin-lightningcss", "plugin-source-build", "plugin-styled-components", diff --git a/website/docs/zh/plugins/list/index.mdx b/website/docs/zh/plugins/list/index.mdx index e839179b81..e41f6abfea 100644 --- a/website/docs/zh/plugins/list/index.mdx +++ b/website/docs/zh/plugins/list/index.mdx @@ -61,7 +61,7 @@ - [Basic SSL 插件](https://github.com/rspack-contrib/rsbuild-plugin-basic-ssl): 为 HTTPS server 生成不受信任的自签名证书。 - [ESLint 插件](https://github.com/rspack-contrib/rsbuild-plugin-eslint)：用于在编译过程中运行 ESLint 检查。 - [Type Check 插件](/plugins/list/plugin-type-check)：用于在单独的进程中运行 TypeScript 类型检查。 -- [Image Compress 插件](/plugins/list/plugin-image-compress)：将项目中用到的图片资源进行压缩处理。 +- [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：压缩图片资源。 - [MDX 插件](https://github.com/rspack-contrib/rsbuild-plugin-mdx)：提供 MDX 支持。 - [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)：用于注入 Node 核心模块在浏览器端的 polyfills。 - [Lightning CSS 插件](/plugins/list/plugin-lightningcss)：用于使用 LightningCSS 作为 CSS 的转译和压缩工具。 diff --git a/website/docs/zh/plugins/list/plugin-image-compress.mdx b/website/docs/zh/plugins/list/plugin-image-compress.mdx deleted file mode 100644 index 65bbeb6cfc..0000000000 --- a/website/docs/zh/plugins/list/plugin-image-compress.mdx +++ /dev/null @@ -1,69 +0,0 @@ -# Image Compress 插件 - -import { SourceCode } from 'rspress/theme'; - - - -Image Compress 插件会将项目中用到的图片资源进行压缩处理，进而在图片视觉观感不受影响的同时减小产物体积。 - -## 快速开始 - -### 安装插件 - -你可以通过如下的命令安装插件: - -import { PackageManagerTabs } from '@theme'; - - - -### 注册插件 - -你可以在 `rsbuild.config.ts` 文件中注册插件： - -```ts title="rsbuild.config.ts" -import { pluginImageCompress } from '@rsbuild/plugin-image-compress'; - -export default { - plugins: [pluginImageCompress()], -}; -``` - -## 选项 - -插件接受一系列压缩器配置项组成的数组，数组的每一项既可以是字符串也可以是对象。字符串代表使用对应名称的压缩器并启用其默认配置， -或是使用对象格式配置并在 `use` 字段指定压缩器，对象的剩余字段将作为压缩器的配置项。 - -插件默认会开启 `jpeg`, `png`, `ico` 三种图片压缩器，即等同于如下两种写法的配置： - -```js -pluginImageCompress(['jpeg', 'png', 'ico']); -``` - -```js -pluginImageCompress([{ use: 'jpeg' }, { use: 'png' }, { use: 'ico' }]); -``` - -通过指定配置项可以覆盖默认配置，例如让 jpeg 压缩器识别新的拓展名并设置 png 压缩器的质量： - -```js -pluginImageCompress([ - { use: 'jpeg', test: /\.(?:jpg|jpeg|jpe)$/ }, - { use: 'png', minQuality: 50 }, - 'ico', -]); -``` - -默认的 `png` 压缩器为有损压缩，如果需要将其替换为无损压缩器，你可以使用如下配置： - -```js -pluginImageCompress(['jpeg', 'pngLossless', 'ico']); -``` - -配置项列表最终会转换成对应的 bundler loader 配置，因此压缩器也遵循从下到上依次匹配的规则。 -例如对于如下配置，`png` 压缩器会优先于 `pngLossless` 压缩器生效： - -```js -pluginImageCompress(['jpeg', 'pngLossless', 'ico', 'png']); -``` - -压缩器的具体配置项请参考 [@napi-rs/image](https://image.napi.rs/docs)。