4/29/2023 0 Comments Javascript minify source map![]() This plugin receives a configuration object which allows us to specify custom sourceMappingUrl pragma. Remember devTool property? Turns out it’s a shorthand for SourceMapDevToolPlugin, which enables more fine grained control of source map generation. Well, it’s not that complicated, but requires some additional webpack tuning. The good news are that we can specify absolute URL which would point to local development environment. In this example url is relative, so sourcemap file should be stored next to the js bundle itself. This pragma helps browser to find source maps for specific bundle. Later, wepback adds a special pragma to the end of generated javascript file, which looks like this: //# sourceMappingURL=main.js.map When babel compiles javascript code it generates a sourcemap file along with javascript bundle, same applies to minifier (UglifyJS or smth else). Before diving into implementation details, let’s recall how source maps work in general. Referencing an external source map file only adds around 3050 bytes to the uncompressed file size. js.map file referenced from the minified. The preferred delivery method is to ship source maps in a separate. Second option looks much more interesting to me. An inlined source map eliminates the file-size gains achieved through the minification process. Do not expose sourcemaps to the Internet and make dev tools load them from developer’s machine instead.This solution is somewhat limited, because it won’t work if you use CDN on top of s3. Upload assets to s3 and use ACL to restrict access to sourcemaps for specific set of users.There’re couple of things we can do to solve the problem: This would allow any visitor to debug your website and see the source code, which is not what we usually want (unless it’s an open source project). But there’s still one issue with this approach - sourcemaps needs to be uploaded along with the minified code so that browser’s dev tools can download and use it. Sounds easy, right? And you probably already use it. Sourcemaps can be easily configured with webpack, all you need to do is to set devTool property in your to either 'sourcemap' or 'hidden-sourcemap'. It’s not an ideal solution, but it works most of the time. It allows you to debug minified code as it was unmodified. There’s a good solution for this issue - sourcemaps. Your code is heavily modified during transpilation and minification and it becomes nearly impossible to debug on production. It allows to write modern javascript and support outdated browsers at the same time. Nowadays most web developers use tools like webpack and babel to build their front-end code.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |