perf: mark defineComponent as side-effects-free

[antfu]

Rollup now supports marking a function as sied-effect free:

• feat: support #__NO_SIDE_EFFECTS__ annotation for function declaration  rollup/rollup#5024

It's a common pitfall in tree-shaking component libraries. For example

export const RouterView = defineComponent(...)
 
export const RouterLink = defineComponent(...)

import { RouterView } from './my-route.ts

It seems RouterLink should be tree shaken, but in reality, because defineComponent is a bit complex that Rollup can't know whether it contains side-effects, causing it still remain in the bundle even if it's not been used.

A solution to that is to add the __PURE__ comment to mark them as pure. But that requires to do so every single time, which can easily be forgotten.

export const RouterView = /*#__PURE__*/ defineComponent(...)
 
export const RouterLink = /*#__PURE__*/ defineComponent(...)

So, instead of asking every callee to add __PURE__, we mark the defineComponent function itself to be side-effect-free using __NO_SIDE_EFFECTS__. So they can always be safely tree-shaken.

In this PR, the following functions are marked side-effect free:

• defineComponent
• defineAsyncComponet
• defineCustomElement
• defineSSRCustomElement

Side note: because we are using esbuild, which does not preserve comments. We need to use /*! to keep the controlling comment, before esbuild supports __NO_SIDE_EFFECTS__ natively (evanw/esbuild#3149)

[sxzz]

LGTM

[Mini-ghost]

Starting from version 0.18.1, esbuild supports the /* @__NO_SIDE_EFFECTS__ */ comment for functions (evanw/esbuild@cf687c9). Would it be possible to consider replacing /*! with /* ?