Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf(css): cache lazy import #12721

Merged
merged 3 commits into from Apr 3, 2023
Merged

perf(css): cache lazy import #12721

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a168245
perf(css): cache lazy import
sapphi-red Apr 3, 2023
e956ffb
refactor: rename to `cachedImport`
sapphi-red Apr 3, 2023
648d455
refactor: avoid creating function everytime
sapphi-red Apr 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
68 changes: 42 additions & 26 deletions packages/vite/src/node/plugins/css.ts
View file
Open in desktop
Expand Up @@ -891,7 +891,9 @@ async function compileCSS(

if (needInlineImport) {
postcssPlugins.unshift(
(await import('postcss-import')).default({
(
await lazyImport('postcss-import', () => import('postcss-import'))
).default({
async resolve(id, basedir) {
const publicFile = checkPublicFile(id, config)
if (publicFile) {
Expand Down Expand Up @@ -926,7 +928,9 @@ async function compileCSS(

if (isModule) {
postcssPlugins.unshift(
(await import('postcss-modules')).default({
(
await lazyImport('postcss-modules', () => import('postcss-modules'))
).default({
...modulesOptions,
localsConvention: modulesOptions?.localsConvention,
getJSON(
Expand Down Expand Up @@ -963,31 +967,30 @@ async function compileCSS(
let postcssResult: PostCSS.Result
try {
const source = removeDirectQuery(id)
const postcss = await lazyImport('postcss', () => import('postcss'))
// postcss is an unbundled dep and should be lazy imported
postcssResult = await (await import('postcss'))
.default(postcssPlugins)
.process(code, {
...postcssOptions,
parser:
lang === 'sss'
? loadPreprocessor(PostCssDialectLang.sss, config.root)
: postcssOptions.parser,
to: source,
from: source,
...(devSourcemap
? {
map: {
inline: false,
annotation: false,
// postcss may return virtual files
// we cannot obtain content of them, so this needs to be enabled
sourcesContent: true,
// when "prev: preprocessorMap", the result map may include duplicate filename in `postcssResult.map.sources`
// prev: preprocessorMap,
},
}
: {}),
})
postcssResult = await postcss.default(postcssPlugins).process(code, {
...postcssOptions,
parser:
lang === 'sss'
? loadPreprocessor(PostCssDialectLang.sss, config.root)
: postcssOptions.parser,
to: source,
from: source,
...(devSourcemap
? {
map: {
inline: false,
annotation: false,
// postcss may return virtual files
// we cannot obtain content of them, so this needs to be enabled
sourcesContent: true,
// when "prev: preprocessorMap", the result map may include duplicate filename in `postcssResult.map.sources`
// prev: preprocessorMap,
},
}
: {}),
})

// record CSS dependencies from @imports
for (const message of postcssResult.messages) {
Expand Down Expand Up @@ -1055,6 +1058,19 @@ async function compileCSS(
}
}

const lazyImportCache = new Map()
function lazyImport<T>(name: string, imp: () => Promise<T>): T | Promise<T> {
const cached = lazyImportCache.get(name)
if (cached) return cached

const promise = imp().then((module) => {
lazyImportCache.set(name, module)
return module
})
lazyImportCache.set(name, promise)
return promise
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incredible how much we'll gain because of this, great find!

About the name, maybe cachedImport would be more clear here. And being general about the imp is interesting but we could directly call import(name) inside to avoid creating the imp function every time it is called?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 for cachedImport

For import(name) I guess you need to pass it as literal so that bundler and typescript can infer it. So I think the current implementations LGTM.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need import(name) since Vite isn't being bundled, and I don't think Vite can be bundled now too due to some constant fs paths. We're already specifying deps dynamically with the requireResolveFromRootWithFallback util, so something like cachedImport('postcss') would be fine by me too.

Copy link
Member Author

@sapphi-red sapphi-red Apr 3, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

postcss is not bundled but postcss-modules and postcss-import are bundled.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah right, let's keep it as-is then to make it simple 😄


export interface PreprocessCSSResult {
code: string
map?: SourceMapInput
Expand Down