I've written an electron application which is packed via electron-packager and shipped to users. Now of course I'd like to put at least some very basic Protection on my sources, ideally merging all my JS files into one big file, and uglify this file.
Of course this would break all require Statements in the HTML and JS files (even if I only minify / uglify without merging, the JS files get renamed).
Is there any convenient way to merge those files upon building the app, without rewriting my working environment?
You can wrap your project with webpack. I'm not sure which framework has been used at your renderer UI framework.
But you can use this plugin https://webpack.js.org/plugins/uglifyjs-webpack-plugin/.
This will help to make uglify your source code.
After webpack build then you just need to change the entry point for main and renderer.
Related
I've been learning about the various ways of content optimization for websites for months now, however I'm still confused about what's the right way of doing so e.g. which 'optimization workflow' results in what effects.
ASP.NET MVC provides its own optimization framework through the 'Microsoft.Web.Infrastructure' package. With that, I can define bundles and minification strategies directly in code on request or when the application starts. However, since my style files are written in less, I need to compile them beforehand, which might slow down the overall application start process, so I feel it might be better to compile those during the build process of the application. But then again, most stylesheet compilers allow to bundle and minimize directly, so why not doing anything there?
LESS files should be compiled when the application compiles
CSS files should be bundled to reduce the amount of needed client requests
CSS files should be minimized to reduce traffic and overall page content size
So, what's the suggested way of accomplishing this?
Compile LESS files on build (with e.g. dotless)
Deploy application to server
Bundle and minify on request using optimization bundles?
When does this bundling and minification happen in the ASP.NET lifecycle? On the first start of the web application? On every request?
Bundling and minification happens on application start.
By default the bundle is created on the first request and then cached on the server. The cached version is then used for all other requests.
The bundling and minification occur at the start of the web application. That is where we specify the process.
Some of the tools allow you to do it explicitly, in such cases we load the .min.js files directly.
When we create a min.js using any tool, the source and minified files are different. These are mapped through a map file.
As we update the source files during development, there are chances that the min.js files are not updated when the source .js files are changed. This issue is more prominent when the files are source controlled. In such a scenario during deployments, it is common to find that the changes in the source machine aren't reflecting in the deployment.
The best thing for bundling and minification would be to adopt the Optimization framework provided by ASP .NET, this does the job dynamically unlike other external tools.
When compilation debug = true it skips the process and loads the original files without bundling, when it is false, the framework bundles all the specified JS and CSS files and deploys it to the server.
I hope this answers your question.
I'm a little confused as to how MVC handles CSS and Javascript, and I have a few questions.
Whenever I create a default MVC (5) application, I see that there are already a number of CSS and Javascript libraries added, with both normal and minified versions.
When I look at the BundleConfig class, I see that the regular files are bundled together, but the minified versions are not.
When are the minified versions actually used? When I debug the site, or even deploy it to a server, I never see these being used. Is this something I have to change myself, or is there a setting for this?
Also, do I need to keep the regular and minified versions of these files in sync, or is this something MVC can do automatically?
Thanks
Bundling
Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine
or bundle multiple files into a single file. You can create CSS,
JavaScript and other bundles. Fewer files means fewer HTTP requests
and that can improve first page load performance.
Minification
Minification performs a variety of different code optimizations to
scripts or css, such as removing unnecessary white space and comments
and shortening variable names to one character.
Your Question ?
When I look at the BundleConfig class, I see that the regular files
are bundled together, but the minified versions are not.
Answer :
You don't need to include minified versions into bundle.B'cos bundling itself does this (minification) at the time when your app's status is release.By default Debug mode will use non minified version.
Your Question ?
When are the minified versions actually used? When I debug the site,
or even deploy it to a server, I never see these being used. Is this
something I have to change myself, or is there a setting for this?
Answer :
Minified version will use at the time app is on production (or release mode).
You don't need to do anything here.It does automatically when you change the App's status as release.
Your Question ?
Also, do I need to keep the regular and minified versions of these
files in sync, or is this something MVC can do automatically?
Answer :
You don't need to do anything here.It does automatically by the framework.
Important Note :
You don't need to add minified files into bundles.B'cos bundled files will be automatically minified when app status is on release mode.Please read below thread for more info.
Bundle vs Minification,Which one is the best
By default, if your app is built with Debug option, bundling and minification takes unminified versions. If site is built in Release mode, minified versions of files are taken, where available.
On top of that you can enforce minification yourself by having
BundleTable.EnableOptimizations = true;
in your BundleConfig class. This enables minification for all the bundles for you. To have this minification only in releases I usually do compiler condition:
#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif
And it is very recommended to read the documentation already linked in comments
Is there any advantage to leaving the Scripts folder where it is in the default ASP.NET MVC Project structure.
In my mind it makes more sense to create subfolders for scripts, css files, and images under the Content folder.
Any downside to doing this?
In short, no, there is no real downside to doing this. It is how I have been structuring my MVC projects.
There are some advantages to doing this, actually... on many projects I am serving up all of the static content from a separate domain, so grouping all of the static content into a single folder has made the QA/production deployment process much easier (since we are scripting deployments with MSBuild and calling out to minify utilities for the CSS and Javascript files).
Minor downside is having to look in multiple places for the 'bits' of each add-on framework etc. you may have. Hence, I prefer \assets\ - then within each framework folder (jquery, bootstrap etc) I have all the .JS & .CSS etc files and/or subfolders that come with that product. However, MVC bundling helps by allowing you to have all your references in the one BundleConfig module/class if you wish.
(and why do you think the jQuery team are unable or unwilling to write decent documentation?;)
For example, go to http://jqueryui.com/download/all/ and download either
jQuery UI 1.10.3 (source, demos, themes, tests)
jQuery UI 1.10.3 Themes
#1
There is a MANIFEST file.
There is a README.md file but no explanation of the the layout of the archive.
There are several files with a JSON extension e.g. ui.accordion.jquery.json. They contain some information about the particular UI widget. I don't know what these are used for, do you know?
A file named package.json. It seems just to be some library info in JSON format. Do you know what this is for? I suspect it's linked to the other .json files, but who knows?
There is an directory named external that holds javascripts. Do you know what this is for?
There is the jquery-1.9.1.js file. No minified version.
A licence in MIT-LICENSE.txt.
An AUTHORS.txt file, which contains the names of the contributors, that are repeated several times throughout the archive. Not one of them managed to list what's in the archive thoroughly though ;)
A demos directory with what appears to be all the demos from the website.
A Gruntfile.js that the README says is used to build jQuery. Whatever "building" jQuery means.
A tests directory.
There is a directory named ui that seems to hold all the jQuery UI effects javascripts, also minified in a subdirectory, and an i18n subdirectory for those widgets that need internationalization.
There is a directory named themes. In it there is a subdir called base that holds the base theme stylesheet. This subdir also contains an images dir for the base theme. It also holds stylesheets for several of the effects e.g. jquery.ui.accordion.css. Do these only work for the base theme or can they be applied to any theme? If not, why does only base have them? (see below) There is also a minified subdir which has minified versions of all the stylesheets.
#2
The archive contains a MANIFEST file
but no README.
An AUTHORS file.
A package.json file with a small amount of information about the project.
It has several themes but no base.
There are no effects/widget files in either the root directory or each of the themes' directories.
Each theme directory contains an images subdirectory with image files associated with that theme, a jquery-ui.css stylesheet, a minified version of this, and a jquery.ui.theme.css. The jquery-ui.css in each theme directory is different to each directory. Do you know what each of these files is for? Why aren't all the specific changes in the jquery.ui.theme.css file?
Why do I need to know this?
This may come up in the comments so I'll answer it here. I've written a couple of libraries to help with deploying the correct version / theme in Ruby Rack projects, Rack JQueryUI and Rack JQueryUI Themes. Every time there's a version change of jQuery UI I have to deal with these undocumented archives, that also seem to change in layout / contents between versions. I've not had good feedback when speaking with the jQuery team - I find they are lamentable at documentation and it's obviously not a priority for them, they'd rather be renaming functions or something - so I'd rather just have someone helpful answer me here, and this will make a good place to keep it (out of their reach, so to speak).
I'm most interested in the questions around the theme directories as that will directly help me right now, but I've extended the scope of the question because I believe it will help others and I am curious.
Let's start with an explanation of what jQuery UI downloads are: They're a full bundle of development and production files. Keep in mind that jQuery UI is downloaded over 11,000 times per day (and that's just the download builder usage). The ways in which these downloads are used can vary greatly among users. The contents of these downloads are intended to serve the largest number of users. It's important to note that the development bundle is almost an exact copy of the source repository.
source, demos, themes, tests
MANIFEST: This is a file containing a list of every other file in the zip, along with checksums. Very few users will care about the manifest, but for those who do care, it provides critical information.
README.md: (note that you listed README.txt): This is the README for the jquery-ui git repository. It's an exact copy of what you will see if you view the project on GitHub.
*.json: These are plugin manifest files for the jQuery Plugin Registry. These files are never stored in the master branch (or any other branch), but are always included in tags. Because they provide useful information, they're included in the downloads. You can read more about the manifest file structure.
package.json: package.json is a standard file for use with npm/node. All jQuery projects rely on node to do linting, testing, builds, releases, etc. This is completely separate from the other JSON files which are for the jQuery Plugin Registry. They have very similar structures, because the plugin manifest files were designed based on npm.
external: This directory contains third party scripts which are used in demos and tests.
jquery-1.9.1.js: This is the latest stable version of jQuery that jQuery UI was tested against. We never include minified jQuery versions in the jQuery UI repository since they're horrible for debugging.
MIT-LICENSE.txt: The license which defines the terms under which you can use the files in the download.
AUTHORS.txt: A list of contributors to the jquery-ui repository. This does not include contributors to other parts of the jQuery UI project, such as work on any of our various sites or documentation.
demos: A directory of demos for the selected components (in this case all components). The demos actually originate in the jquery-ui repo and are copied to jqueryui.com during releases.
Gruntfile.js: We use Grunt for linting, testing, and building. Grunt is a JavaScript task runner for node. Building jQuery UI means minification and concatenation.
tests: A directory of tests for the selected components (in this case all components).
ui: A copy of the source files, with #VERSION replaced with the release's version number. The jquery-ui.js file is generated during the build by concatenating all of the source files together. The minified directory is generated during the build by minifying the individual files. And of coure jquery-ui.min.js is generated by both concatenating and minifying the source files.
themes: A copy of the source files, with #VERSION replaced with the release's version number. This undergoes the same process as the ui directory regarding concatenation and minification. The individual component files are theme-independent. So jquery.ui.accordion.css will work with any theme. These are the required CSS files for use with the JS files. You can build any theme you want, but if you don't use the functional CSS for the component, then nothing is guaranteed to work. Full themes (what pretty much all users actually use), contain all of the functional CSS plus the theme CSS in a single file.
themes
Themes are generated by ThemeRoller. They do not live in any repository and as such do not contain artifacts of any repository. This is why there is no README.
MANIFEST: Same as above, the manifest contains checksums for the files in the download.
AUTHORS.txt: A copy of AUTHORS.txt from jquery-ui. This should exactly match the source download. While this isn't a list of people who have contributed to themes, we view this as part of the code and include the same list of authors.
package.json: A copy of package.json from jquery-ui. This file does seem a bit strange, since it's not coming from a repository. We should probably remove this.
themes: A directory of generated themes. These do not contain the source variables/tokens. The base theme is not a generated theme and therefore is not included. You'll notice that generated themes also have a different directory structure. Each theme contains three files: jquery.ui.theme.css is just the theme CSS; this is what can be used with the functional CSS provided in the base theme. jquery-ui.css is a full theme; it includes the theme CSS plus the functional CSS. jquery-ui.min.css is a minified copy of jquery-ui.css.
jQuery UI has decided to simplify its package (extremely) in order to help avoid confusions such as the above. From 1.11 and on, we distribute
https://github.com/jquery/download.jqueryui.com/pull/214. On any new questions just let us know.
When you add a script bundle and have something like:
bundles.Add(new ScriptBundle("~/bundles/base.scripts").Include(
"~/Scripts/jquery-1*"));
It loads up the raw Jquery version and the minified version. Those files are both in the Scripts folder so I assume the asterisk is doing exactly what you tell it.
Is there a way to have only the minified version render when in debug=false mode and the raw version in debug=true?
Or is it down to actually specifying the exactly files you want instead of using the asterisk?
Regards,
Jacques
This should be happening automatically via the BundleCollection's FileExtensionReplacementList which should be selecting the .min version of the file when debug=false. The default templates when you create a new project should be using this functionality as well.
Although this question is now over a year old, in case someone stumbles across it in need of help on the same problem, Bundling introduces the {version} wildcard which uses a regular expression to look for a typical version number pattern (such as 1.9.1) so that when you update a package manually or via NuGet you don't have to go and change your Bundles configuration.
It will also be smart enough to select from files named .min.js and .js - using the former in release configurations and the latter in debug, exactly what the OP is after.
For ASP.NET MVC 4, this means with a debug configuration, the file
jquery-1.7.1.js will be added to the bundle. In a release
configuration, jquery-1.7.1.min.js will be added. The bundling
framework follows several common conventions such as:
Selecting “.min” file for release when “FileX.min.js” and “FileX.js” exist.
Selecting the non “.min” version for debug.
Ignoring “-vsdoc” files (such as jquery-1.7.1-vsdoc.js), which are used only by IntelliSense.
See Bundling and Minification and {version} wildcard in MVC4 Bundle
Word of warning though, if you have both jQuery-1.9.1.js and jQuery-1.10.2.js in the directory (for example) then both will be matched and added to the bundle - something that obviously is not desirable.
Note also that the minified version of the file must be named file.min.js, not file-min.js or min.file.js for this to work. The YepNope library for example is named yepnope.1.5.4-min.js when you get it via NuGet which means both this and the unminified version are added to the bundle.