Copied/Exported VueJS Project is much smaller than the original - javascript

I did finish my VueJS Applet project the other day and have to send in the code for grading aswell as to the customer.
Now when I copy the folder where the project lies under
.../vue-js-projects/PROJECTNAME
to another place to zip it together with evrerything else the copied file is much smaller.
The original in it's folder is like 200MB whereas the copied one is only about 20MB so 10% the size.
Is this because I'm using an IDE (Webstorm) which creates lot's of local stuff that is not needed when exporting or is there a "right" way to export a vue project.(I'm talking abbut the whole project not just the built ../dist directory)
Thanks alot in advance

Consider version control - github, bitbucket or whatever you like.
.gitignore file will help you to leave unnecessary files locally.
Most of version control platforms offers .zip download, so you dont need to worry about file sizes, some bug fixes, adjustments or whatever.

Related

How can I modify a file in more than one project at the same time automatically?

I have a main project and some sub-projects that are similar to the main project.
The only one difference is the config file (that has some particular variables depending of the client which corresponds).
I have detected one bug in the main project so I would like to fix it in all sub-projects without copy and paste the file that I have changed manually because I have around 20-30 sub-projects.
I do not care about the language in which I would program because I have the same problem at Android projects or web development projects.
How can I modify a file in more than one project at the same time automatically?
Thanks in advance!

How can I encode JS code in a Webpack/Rollup bundle to prevent modification with a simple editor?

Foreword: I know there is no silver bullet to encode/obfuscate JavaScript to prevent modification.
I use Webpack/Rollup + Gulp + React to build a bundle.js, and it is included in a few pages of a very large website. Everything is under a very old web-based content management system.
The bundle.js file includes paragraphs of text and other stuff. And source code is checked into GitHub.
There are multiple content editors in the organization and most of them are not software developers or study in CS. So they don't use GitHub and Webpack (and they don't want to use).
My problem is, sometimes, they will just open my minified bundle.js and modify some texts manually. So their changes only goes into CMS but not GitHub.
Out-of-sync contents makes maintaining these pages extremely difficult. I want to encode the JS file so that they are not able to modify them too easily in Notepad. Because they are not very skillful, if they can't modify it with Notepad, they won't solve it and will point it back to the correct person.
What is the best way to do so? And will the solution break source maps?
I know I might be able to do it with BASE64 encode on Gulp, and then decode on browser side. So the bundle.js looks garbage to most people. But is there any better solution to this?

How to refer JS files like componenet and use acrsoss the web application [duplicate]

In case the question wasn't clear. I have 3 MVC projects in one Solution. Every time I create a new project it adds the "Scripts" folder with all the .js files I'll ever need. I don't want to have this created every time for every application. Is there a way to reference scripts from a central folder in the solution so all applications/projects can share one common script folder with all the scripts common among them?
Edit:
Please explain the pros and cons of doing this if there are any...now I'm curious.
Here is what I would recommend:
Right click the solution and create a New Solution Folder called Common Javascript Files (or whatever you feel like calling it.
Right click on the Solution, click Open Folder in Windows Explorer,
or navigate there manually for other versions of Visual Studio :(
In the solution directory, create a directory with the same name as the solution folder (solution folders do not normally match directories at the source code level but this will for sanity sake).
In this new directory, add files that need to be shared between solutions.
In Visual Studio, click the solution folder and select Add - Existing Item.
In the file selection dialog, navigate to the directory previous created, select the file(s) added to the directory and click Add.
In each Project that needs a shared file, right click on the project (or directory within the project) and click Add - Existing Item.
Navigate to the shared Directory, Select the files and click the drop down arrow then click Add As Link.
Now the files in the projects are essentially short cuts to the files in the Solution Folder. But they are treated as actual files in the project (this includes .CS or Visual Basic files, they will be compiled as files that actually exist in the project).
PROS
Files are truly shared across projects at Design time
Only the files needed for each project can be added, it's not all or nothing
Does not require any configuration in IIS (virtual directory etc)
If the solution is in TFS Source control, you can add the Directory to the TFS Source and the shared files will be source controlled.
Editing a file by selecting it in the Project, will edit the actual file.
Deleting a Linked file does not delete the file.
This is not limited to JS files, linked files can be ANY file you might need (Images, Css, Xml, CS, CSHTML, etc)
CONS
Each deployment gets it's own file.
There is a small learning curve when understanding that Solution Folders are not Directories that exist in a Solution Directory.
The best thing to do, imo, is to roll your own CDN... Basically just create another site in IIS and give it it's own binding, e.g. "http://cdn.somedomain.com"
Then store all of your css/js/fonts/shared images etc on the CDN site and link to them from your other sites.
Doing so solves 2 problems,
All of your stuff is shared when it needs to be and you only have to manage 1 revision per file.
Your users browsers can cache them in 1 single location instead of downloading copies of your stuff for every site that uses them..
I added this answer because I see a lot of people referrencing creating virtual directories. While that does indeed share the files, it creates multiple download paths for them which is an extreme waste of bandwidth. Why make your users download jquery.js (1 * number of sites) when you can allow them to download it once on (cdn.somedomain.com).
Also when I say waste of bandwidth, I'm not just talking about server bandwidth, I'm talking about mobile users on data plans... As an example, I hit our companies HR site (insuance etc) on my phone the other day and it consumed 25mb right out the gate, downloaded jquery and a bunch of stuff 5 times each... On a 2gb a month data plan, websites that do that really annoy me.
Here it goes, IMO the best and easiest solution, I spent a week trying to find best and easiest way which always had more cons than pros:
Resources(DLL)
Shared
images
image.png
css
shared.css
scripts
jquery.js
MvcApp1
Images
Content
Shared <- We want to get files from above dll here
...
MvcApp2
Images
Content
Shared <- We want to get files from above dll here
...
Add following to MvcApp1 -> Project -> MvcApp1 Properties -> Build events -> post build event:
start xcopy "$(SolutionDir)Resources\Shared\*" "$(SolutionDir)MvcApp1\Shared" /r /s /i /y
Here is explanation on what it does: Including Build action content files directory from referenced assembly at same level as bin directory
Do the same for MvcApp2. Now after every build fresh static files will be copied to your app and you can access files like "~/Shared/css/site.css"
If you want you can adjust the above command to copy scripts from .dll to scripts folder of every app, that way you could move some scripts to .dll without having to change any paths,here is example:
If you want to copy only scripts from Resources/Shared/scripts into MvcApp1/scripts after each build:
start xcopy "$(SolutionDir)Resources\Shared\Scripts\*" "$(SolutionDir)MvcApp1\Scripts" /r /s /i /y
This is a late answer but Microsoft has added a project type called Shared Project starting Visual Studio 2013 Update 2 that can do exactly what you wan't without having to link files.
The shared project reference shows up under the References node in the
Solution Explorer, but the code and assets in the shared project are
treated as if they were files linked into the main project.
"In previous versions of Visual Studio, you could share source code between projects by Add -> Existing Item and then choosing to Link. But this was kind of clunky and each separate source file had to be selected individually. With the move to supporting multiple disparate platforms (iOS, Android, etc), they decided to make it easier to share source between projects by adding the concept of Shared Projects."
https://blogs.msdn.microsoft.com/somasegar/2014/04/02/visual-studio-2013-update-2-rc-windows-phone-8-1-tools-shared-projects-and-universal-windows-apps/
Info from this thread:
What is the difference between a Shared Project and a Class Library in Visual Studio 2015?
https://stackoverflow.com/a/30638495/3850405
A suggestion that will allow you to debug your scripts without re-compiling the project:
Pick one "master" project (which you will use for debugging) and add the physical files to it
Use "Add As Link" feature as described in Eric's answer to add the script files to the other projects in solution
Use CopyLinkedContentFiles task on Build, as suggested in Mac's comment to copy the files over to the second over to your additional projects
This way you can modify the scripts in the "master" project without restarting the debugger, which to me makes the world of difference.
In IIS create a virtual folder pointing to the same scripts folder for each of the 3 applications. Then you'll only need to keep them in a single application. There are other alternatives, but it really depends on how your applications are structured.
Edit
A scarier idea is to use Areas. In a common area have a scripts directory with the scripts set to be compiled. Then serve them up yourself by getting them out of the dll. This might be a good idea if you foresee the common Area having more functionality later.
Most of the files that are included by default are also available via various CDN's.
If you're not adding your own custom scripts, you may not even need a scripts directory.
Microsoft's CDN for scripts: http://www.asp.net/ajaxlibrary/cdn.ashx

How do I use CocoonJS?

I made a game using Construct 2, I first try to use PhoneGap build to make the app but I realized at PhoneGap game are extremely slow. So I heard that CocoonJS can solve this problem. I tried to to make a CocoonJS game by exporting within Construct 2 but you are required to purchase the update. I also tried exporting to HTML Game and uploading to CocoonJS and testing on a iPhone where all I got was a black screen. I don't quite understand what format the game need to be in. What kind of struture is needed. If any has been in my situation or know how to solve it please help. I am no a really short deadline.
For CocoonJS:
When exporting from Construct 2 with the CocoonJS option it packages it in a .zip file. So try putting your files in a .zip and try that. If you're getting a black screen after that you may not have packaged the .zip correctly, make sure the index.html isn't buried inside another folder in the .zip file.
For more information, check this out: http://wiki.ludei.com/cocoonjs:launcherapp

Best practice to maintain minified files and deployment/development

I'm stuck in a bit of dilemma on how to get around this and was hoping someone would point me in the right direction.
I am trying to cut down on the size of css and javascript files to improve our website's performance. But the problem is, on deployment, we simply upload our current svn repository's latest development version onto the server.
I am finding it hard to add that extra step for every developer to minify files before every change, as it adds a risk for negligence and human error.
I was thinking about having the readable version of files on the server anyway, but having some kind of file monitor that will execute a minifier when a file is changed, and update the file used by the website. Has anyone implemented this before?
EDIT
We're currently running on ASP.Net 2.0, Windows Server 2003
If you are using .net on the server, you could also try RequestReduce available on Nuget. It minies and bundles your css and js and also sprites css background images. It does it on the fly so your devs don't have to do this as an extra step. As long as you have some kind of versioning in place that changes the css/js url when it is changed, RequestReduce will automatically detect the change and process the file. It does all of this in the background and there fore does not affect the response time. If the files are not versioned via the url, RequestProduce provides a dashboard where you can flush its cache. RequestReduce can be deployed with absolutely no code changes and hardly any config in most use cases.
If you are using ASP.NET, try MBCompression library - it minify files automatically and you don't need do it manually:

Categories

Resources