![]() ![]() ![]() They are resources you'll likely use almost daily. These source files are therefore for programmers. ![]() In essence, the map can identify the position of the initial source file if the produced code file contains errors. Sourcemaps are primarily used to assist in troubleshooting. Necessity of Source MapsĪlthough there have been discussions about compiled-to-JavaScript languages like CoffeeScript and the potential to add support for CSS preprocessors like SASS or LESS, source mapping currently only functions between uncompressed/combined JavaScript to compressed/uncombined JavaScript, the future is looking bright.Ī source map is a relationship between one or more initial source files and the produced, transpired, or minified JavaScript file. The source map can be immediately parsed by developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+), giving the impression that you are operating unminified and uncombined files. You can search in the source map and get the initial position when your generated JavaScript makes a query for a specific line and column number. They include information about the original code's file structure, variable names, and line-by-line correspondence with the minified code. Source maps are files that provide a mapping between the minified or transpiled code that is executed in the browser and the original, unminified source code written by developers. We'll also be exploring the different types of Source Maps and how to generate them for your own code. In this blog post, we will explore the concept of JavaScript Source Maps and how to get started with them. This makes it easier for developers to debug and troubleshoot issues in their code. When a browser encounters an error in the minified code, it uses the source map to locate the original source file and line number where the error occurred. They provide a way to map the minified or transpiled code back to its original source code, making it easier to debug and troubleshoot issues. This is where JavaScript Source Maps come in handy. However, debugging and troubleshooting JavaScript code can be a daunting task, especially when the codebase is large. It is used to develop complex web applications with dynamic and interactive features. Way more assets need to be made accesible for end users to archive them.JavaScript has become an essential programming language for web developers. Also, archiving some Assets helps to reduce the JS file a bit, however, there are only about 20-30 js assets that can be archived. Keep mind that the browser will stop the page rendering while downloading the brotli compressed web.assets_frontend_ (603kb (default) vs 571kb (modified)), uncompress it, parse the JS (bottleneck is here), execute and render the page.įurther improvements could be made by even removing some legacy functions in that file. The point I want to make for the Odoo team is that further minifying that file will heavily increase performance for all users. I conclude the results went up by 5 points in performance alone from merely removing comments and whitespace. I ran more tests and immediately got multiple results over 80, with the highest at 84 with a blocking time of 530ms. My mobile homepage was scoring around 75 with the best score at 79 with about 800ms blocking time. Then reuploaded it into the database replacing the original bundle and ran more PageSpeed tests. ![]() (That's a lot for just extra whitespace and comments). Downloaded that file (2.4MB !), applied a conservative minifying algorithm eliminating mostly just comments (no uglyfiyng!) and size went down to 2.25MB, and then a bit more by doing some manual whitespacing removal in my script editor for a total savings of let's round it up to 6.5% of file size. Anyway, the rest of the file seems properly minified with uselful comments left as title to split the code into chunks. Why is there a qweb template loaded into a JS variablie in a file that is supposed to be JS minified only. Around line 9787 all the way to the end line, 12278, there is a QWEB code with heavy indentation, lots of extra whitespaces and comments. Lately I've been playing a lot with PageSpeed Insights improving the performance of my website (with Online Odoo hosting) for SEO purposes and I've come to the point where the file web.assets_frontend_ is the performance bottleneck.Įven though it is supposed to be minified it is heavily unminified. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |