The plugin is included in the output bundle although it is not actually used #77
Description
How to Reproduce
You need [email protected], a bundler and [email protected].
vite.config.js:
import {defineConfig} from 'vite';
export default defineConfig({});index.html:
<html>
<title>Hello world</title>
<body>
<script src="./index.ts" type="module"></script>
</body>
</html>index.js:
import rehypePrism from 'rehype-prism-plus';
import rehypePretty from 'rehype-pretty-code';
const func = () => {
rehypePrism;
console.log('hello world!');
}Run npx vite build to get the output.
Expected Behavior
Since the function is not actually called, console.log('hello world') is not included in the final output, so is the rehype-prism-plus, resulting a few kilobytes of js bundle.
Actual Behavior
Since the function is not actually called, console.log('hello world') is not included in the final output, but rehype-prism-plus is, increasing the final output bundle size.
Description
This is not something critical, but related to developer experience and thought it would be good if I let others know.
vite uses rollup for building and rollup smartly detects which codes are not actually used and removes them from the output.
This is so-called tree-shaking.
However, rollup somehow determines that rehype=prism-plus or its dependencies appear to have side effects and does not delete it.
You can find more about here: https://rollupjs.org/troubleshooting/#tree-shaking-doesn-t-seem-to-be-working