mdx-hast-reduction is a plugin for mdx-js/mdx to perform reduction on the MDX HAST tree.
WARNING This plugin uses
dangerouslySetInnerHTMLfor reduction. Normally, you don't want unknown users to write MDX documents freely for security reasons. But if you do, please sanitize user inputs, no matter you decide to use this plugin or not.
MDX is a useful project to use JSX in markdown documents and transform them
into React components. However, because the way it transpile the
documents, the output files often come with a bloated size. MDX treats React
components and HTML tags the same, and generate
React.createElement call for
each element it receives. Since markdown-formatted documents will always be
rendered to static HTML code, we can safely use
reduce the number of elements for outputs.
Put this plugin in the
See MDX documentation. Or you can check out
webpack.modules.config.js in the
A possible better benchmark would be to collect a sufficient amount of MDX
documents for this test. Here we only use the
READMD.md for the MDX project,
which you can found here.
We create a test page which only include the markdown file, and compare the
output bundle size w/o this plugin enabled. The sample project can be found in
# With this plugin: $ tree dist -s dist ├── [ 370] index.html ├── [ 8541] main.8ef1c82d1037b7e85e52.js ├── [ 128] main.8ef1c82d1037b7e85e52.js.map ├── [ 4096] vendors ├── [ 119357] vendors.b8641733886540194745.js └── [ 446] vendors.b8641733886540194745.js.map # Without this plugin: $ tree dist -s dist ├── [ 370] index.html ├── [ 11656] main.954bf1d244f45d843edf.js ├── [ 128] main.954bf1d244f45d843edf.js.map ├── [ 4096] vendors ├── [ 119357] vendors.b8641733886540194745.js └── [ 446] vendors.b8641733886540194745.js.map
It's (11656-8541)/11656 = 26.7% reduction on size without losing any functionality. All JSX nodes (if there is any) will be kept.
Note that these numbers may vary by webpack or MDX versions.
Our goal is to reduce bundle size without losing any functionality. Bug reports, pull requests, or any suggestions for achieving this goal are welcome!
- Respect options (especially the
- Include reduction on JSX HTML literal (e.g.
<i>node</i>will be reduced).
- More aggressive reduction on the root node.