I use the excellent pdfmake JS library in my project, with webpack 2.2. However it makes the produced bundle much larger (at least + 1 MB ouch).
One problem is the big fonts file - I only use the default Roboto font, is there a way to get rid of the fonts file, then ? Why do we need this at all ? System fonts would be ok in my case.
Surprisingly it seems the total size of the files from a CDN is smaller than the resulting added size in my bundle... Maybe there is some special configuration to do in webpack for pdfmake ?
Any help would be appreciated.
Related
I'm generating a markdown document using my Rails 4.2 app which includes images that are on the same server (in the public folder).
Using pandoc (pandoc-ruby 1.0.0), I want to convert the document into various formats, especially HTML (to preview it in the browser) and DOCX (to download it).
The preview in the browser works perfect. But when converting to DOCX, the images aren't included. I guess this is due to multiple requests to referenced images while pandoc is generating the document.
I have already experimented with setting allow_concurrency to true, but this didn't solve the problem. Also, it happens on both the development and the production environment (while in development, it takes a long time, and in production it doesn't - maybe due to some differences in timeout limits?).
I have already found a way to solve my problem by not referencing the images using an URL, but by embedding it as base64 string into the document. But this for sure can't be the solution of choice, as it tends to bloat up the HTML document a lot. Also, on production, I already get RuntimeError (Stack space overflow: current size 8388608 bytes) from pretty small embedded images. So I have to find a real solution.
Reference the images by file path instead of url if they are on the same server.
I am trying angular.dart. When I compile dart to js it generates a single file which is containing my dart code and whole of angular and may be other libraries also. The problem is file size becomes too large ( 1.5L+ lines ). This also means whenever I will make even a small change in my file, whole js file will be changed and hence can't be cached. Is there a way by which I can have different js files: 1 for my code, 1 for angular and for other libraries.
How do you guys slove this problem ?
The amount of lines has nothing to say about the file size. Is the file really to big?
You could use DefferedLibrary to split up your application into multiple files, but that won't help you as the file are coupled very close to each others and change both after recompiling (due to tree shaking). But this can help your load time as parts of the application can be loaded later on demand.
But if your application is really to big and have slow load times, you may take a look into the MirrorsUsed annotation to exclude mirrors information for parts of your application.
I run a web-based timeline maker that lets users create timelines in HTML/JavaScript and then export them to PDF files for printing when they're done.
I have had several users report issues with exporting their timelines to PDFs when the timelines contain certain Unicode characters. Here, for example, is a screenshot showing the web page and the PDF file that is generated:
I've been trying to wrap my head around why some Unicode character blocks like Block Elements and Georgian will export but Chinese and Japanese will not. Also, the export works correctly when I perform it on my local computer, but results in the above output when exporting on Heroku.
Does anyone know what might be causing this?
For completeness, the backend is in Ruby on Rails and it uses the PDFKit gem to convert the HTML page to a PDF and the site is hosted on Heroku.
It sounds like it might be an issue with the fonts on the server. The webpage version of the timeline renders correctly because you obviously have the correct font on the client machine that is running the browser. The PDF on the other hand is generated on the server, and thus has to use a font available to it there.
If that's the case, then using a font that both exists on the server and supports the correct CJK characters should fix this issue.
Having personally experienced this with Rails and Heroku, I can tell you the reason is either (A) fonts on your system not matching the fonts on Heroku, or (B) pdfkit having trouble loading custom fonts linked through CSS, or some combination of both
Most likely, you are referencing fonts on your local system (which contain glyphs for special characters) that don't match the fonts on Heroku. Run fc-list in Heroku's bash to get a list of their installed fonts, and substitute your font(s) for one that has the needed extended charset. However, now you will have to ensure that this font is also installed on your local machine. (Even worse, you could use different fonts for dev and production.)
You can also try uploading fonts to Heroku, and linking them from there. However, I've found this method to be unreliable when spanning across multiple systems or dev/staging/production environments, because each and every system has to have the required fonts installed. And even then, PDFkit makes you jump through hoops to get CSS fonts to work (for example, because of subtle variation in interpretation of font names by different operating systems).
The best solution I've found is to encode and embed fonts directly into CSS. Base-64 encode a font, and add it to the stylesheet:
#font-face {
font-family: 'OpenSans';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
Now you have a bulletproof stylesheet that's portable and self-compatible with every system.
If you do use Docker and is having the same issue above then try installing Japanese fonts at Docker: apt-get install fonts-takao-mincho
If it works then add it to your Dockerfile:
apt update && apt install -y \
# japanese fonts
fonts-takao-mincho
I am working on a SproutCore project. I am trying to get the site as is on the IPAD, but the CSS background images, onClick and redirect is not working on the IPAD.
Let me know any solution on this.
When developing on the iPad, I have found the following to be useful in my Buildfile:
mode :debug do
config :all, :combine_javascript => true
end
Most iOS devices tend to have difficulty loading a large number of Javascript files, and this will concatenate them all into one. This may or may not resolve your issues, but many issues manifest if you leave them as separate files.
Also, do you have any errors in the debugger that you could share? It might help us track down the issue.
For broken images/CSS after building, it's often a relative path issue.
You might want to check your CSS / image paths in your compiled CSS & index.html files.
After building the project, look inside your output directory and try the following:
Open index.html file in your browser, and see which CSS/image files are not loading correctly.
Find your index.html file and replace instances of "/static" with "static"
Find stylesheet-packed.css & stylesheet#2x-packed.css and replace instances of "/static" with "../../../static" (or whatever fixes the path in your case)
I have build.sh script to automate this and it works for me. Let me know if you want it.. Good luck!
Google Chrome audit reports that jquery_mobile.css takes 904 KB (minified) and 87% of it is not used in the current page most pages in my web app are similar. I wonder if there is a simple way to clean up that file and remove all the styles that are not used to save data transfer.
Any ideas?
There is no simple way since jquery ships with a huge number of controls. You would be the only one who knows which ones you are using and which ones you are not.
The only way I see to reduce the size of your CSS is to use the github repo https://github.com/jquery/jquery-mobile/tree/master/css and just pick the CSS files for the components you are using.
That would mean having to get the updates manually when there is a new release rather than just dropping the CSS file from the latest release.