Comments (18)
@kyeotic This requires writing a webpack plugin. This needs to be studied.
from react-md-editor.
I might be reading this incorrectly, but it looks like you hardcode the loading of all languages from prism. It would be nice to be able to pair this down, perhaps by using the prism webpack plugin in the client app and defining the languages as props.
from react-md-editor.
@kyeotic These small JS files are loaded when used, and do not affect the size of the packaged JS.
My application scenario cannot determine which languages to load.
from react-md-editor.
@jaywcjlove Yes, but the bundles are still present in the deployment, and they still add considerable noise to the build and source-map-explorer report. It would be nice if we could whitelist languages so that applications that did know which languages it supported could keep the rest from being bundled. This would be valuable even if the default was to bundle them all.
from react-md-editor.
@kyeotic We need a plugin like monaco-editor-webpack-plugin
from react-md-editor.
I'm actually having a lot of trouble getting the prism webpack plugin to do anything. I tried forking this repo and trimming down the languages, then built with the prism plugin on the lib. I even added the plugin to the app that installed the editor, so that it was running in both places. I get 370+ bundles, which is smaller but not by half as many languages as I removed.
from react-md-editor.
@kyeotic thx! this good idea. I will deal with it when I have time. @uiwjs/react-markdown-preview
from react-md-editor.
Add Webpack configuration
from react-md-editor.
is there any possible solution without ejecting create-react-app?
from react-md-editor.
@ppascualv https://github.com/kktjs/kkt Override create-react-app webpack configs without ejecting
from react-md-editor.
Is there any solution for this issue or any workaround without ejecting the app? I was taking a look at your library but I'm not sure how can it solve the issue.
from react-md-editor.
@ppascualv Add webpack config.
from react-md-editor.
@ppascualv Dynamic import is used. Unable to split chunks it.
https://v4.webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-1
This configuration can enlarge your initial bundles, it is recommended to use dynamic imports when a module is not immediately needed.
from react-md-editor.
it's not work
webpack.config.js
optimization: {
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
// chunks: 'all',
// name: false,
cacheGroups: {
markdown_editor: {
test: /[\\/]node_modules[\\/]@uiw[\\/]/,
name: 'vendors-markdown',
chunks: 'all',
}
}
},
}
from react-md-editor.
Lines 41 to 45 in 34f61a3
from react-md-editor.
how to use it
from react-md-editor.
@guoseven Modify webpack configuration. https://webpack.js.org/configuration/optimization/#optimizationsplitchunks
from react-md-editor.
from react-md-editor.
Related Issues (20)
- Issue with comments using rehype-sanitize on top of react-md-editor HOT 14
- Imcompatible types Preact - NOT found bundle production HOT 1
- HTML Textbox input in preview HOT 5
- Markdown content from Preview HOT 7
- tpye error on `onChange` HOT 1
- Can't resolve 'devlop' for ./node_modules/hast-util-from-html/lib/index.js on version 4.0.1 HOT 3
- Issue on long text HOT 6
- Using `prose` from `tailwind/typography` HOT 5
- Module '"@uiw/react-markdown-preview/nohighlight"' has no exported member 'MarkdownPreviewProps' HOT 2
- 设置指定maxheight后, 全屏显示情况下,编辑区域并不是全屏高度 HOT 2
- Embedded base64 images are not working after update from 3.26.5 to 4.0.1 HOT 9
- Next.js problem while writing an article HOT 6
- ul li tag automatically created HOT 2
- toolbar只使用部分功能 HOT 3
- skipHtml not working
- Controlled toolbar? HOT 1
- Bug: When I push (option+ ₩) + (option + Enter) in MacOS, the cursor is broken HOT 1
- blinking cursor not showing inside md editor when placed in overflows modal HOT 1
- THIS IS NOT AN ISSUE: HACK to Paste Image directly from clipboard HOT 2
- The editor is stuck When value is large HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-md-editor.