af9837de44
This adds a new `analyze` step to our CI that analyzes the bundle size for our `payload`, `@payloadcms/ui`, `@payloadcms/next` and `@payloadcms/richtext-lexical` packages. It does so using a new `build:bundle-for-analysis` script that packages can add if the normal build step does not output an esbuild-bundled version suitable for analyzing. For example, `ui` already runs esbuild, but we run it again using `build:bundle-for-analysis` because we do not want to split the bundle. --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1210692087147570
115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import * as esbuild from 'esbuild'
|
|
import fs from 'fs'
|
|
import path from 'path'
|
|
import { fileURLToPath } from 'url'
|
|
const filename = fileURLToPath(import.meta.url)
|
|
const dirname = path.dirname(filename)
|
|
import { sassPlugin } from 'esbuild-sass-plugin'
|
|
|
|
const directoryArg = process.argv[2] || 'dist'
|
|
|
|
const shouldSplit = process.argv.includes('--no-split') ? false : true
|
|
|
|
const removeCSSImports = {
|
|
name: 'remove-css-imports',
|
|
setup(build) {
|
|
build.onLoad({ filter: /.*/ }, async (args) => {
|
|
if (args.path.includes('node_modules') || !args.path.includes(dirname)) return
|
|
const contents = await fs.promises.readFile(args.path, 'utf8')
|
|
const withRemovedImports = contents.replace(/import\s+.*\.scss';?[\r\n\s]*/g, '')
|
|
return { contents: withRemovedImports, loader: 'default' }
|
|
})
|
|
},
|
|
}
|
|
|
|
async function build() {
|
|
//create empty directoryArg/exports/client_optimized dir
|
|
await fs.promises.mkdir(`${directoryArg}/exports/client_optimized`, { recursive: true })
|
|
|
|
// Bundle only the .scss files into a single css file
|
|
await esbuild.build({
|
|
entryPoints: ['src/exports/cssEntry.ts'],
|
|
bundle: true,
|
|
minify: true,
|
|
outdir: `${directoryArg}/bundled_scss`,
|
|
loader: { '.svg': 'dataurl' },
|
|
packages: 'external',
|
|
//external: ['*.svg'],
|
|
plugins: [sassPlugin({ css: 'external' })],
|
|
})
|
|
|
|
try {
|
|
await fs.promises.rename(`${directoryArg}/bundled_scss/cssEntry.css`, `dist/field/bundled.css`)
|
|
fs.copyFileSync(
|
|
`dist/field/bundled.css`,
|
|
`${directoryArg}/exports/client_optimized/bundled.css`,
|
|
)
|
|
fs.rmSync(`${directoryArg}/bundled_scss`, { recursive: true })
|
|
} catch (err) {
|
|
console.error(`Error while renaming index.css: ${err}`)
|
|
throw err
|
|
}
|
|
|
|
console.log(`${directoryArg}/field/bundled.css bundled successfully`)
|
|
|
|
// Bundle `client.ts`
|
|
const resultClient = await esbuild.build({
|
|
entryPoints: ['dist/exports/client/index.js'],
|
|
bundle: true,
|
|
platform: 'browser',
|
|
format: 'esm',
|
|
outdir: `${directoryArg}/exports/client_optimized`,
|
|
//outfile: 'index.js',
|
|
// IMPORTANT: splitting the client bundle means that the `use client` directive will be lost for every chunk
|
|
splitting: shouldSplit,
|
|
external: [
|
|
'*.scss',
|
|
'*.css',
|
|
'*.svg',
|
|
'qs-esm',
|
|
'@dnd-kit/core',
|
|
'@payloadcms/graphql',
|
|
'@payloadcms/translations',
|
|
'dequal',
|
|
|
|
//'side-channel',
|
|
'@payloadcms/ui',
|
|
'@payloadcms/ui/*',
|
|
'@payloadcms/ui/client',
|
|
'@payloadcms/ui/shared',
|
|
'lexical',
|
|
'lexical/*',
|
|
'@lexical',
|
|
'@lexical/*',
|
|
'@faceless-ui/*',
|
|
'bson-objectid',
|
|
'payload',
|
|
'payload/*',
|
|
'react',
|
|
'react-dom',
|
|
'next',
|
|
'crypto',
|
|
'lodash',
|
|
'ui',
|
|
],
|
|
packages: 'external',
|
|
minify: true,
|
|
metafile: true,
|
|
treeShaking: true,
|
|
|
|
tsconfig: path.resolve(dirname, './tsconfig.json'),
|
|
plugins: [
|
|
removeCSSImports,
|
|
/*commonjs({
|
|
ignore: ['date-fns', '@floating-ui/react'],
|
|
}),*/
|
|
],
|
|
sourcemap: true,
|
|
})
|
|
console.log('client/index.ts bundled successfully')
|
|
|
|
fs.writeFileSync('meta_client.json', JSON.stringify(resultClient.metafile))
|
|
}
|
|
|
|
await build()
|