My application is using JSPM and SystemJS for module loading and is using angular.
My config.js file has angular map like:
"angular": "github:angular/bower-angular#1.5.8"
So when I do import angular from 'angular', I am getting the angular.js file from the Path specified in config.js file. That's good.
Now the requirement is I want to use minified third party javascript files (angular.min.js) in the app. But there is no minified files in jspm registry
So the initial loading time of my application is high because of so many large files e.g. angular.js, browser.js etc. that takes too much time to load.
I know, I can do a jspm bundle to minify all dependency files recursively which includes vendors' files also. But my questions are:
1 - Is it possible to use vendor's minified file (angular.min.js) directly with JSPM? It is good to use vendor's minified file rather than minifying them ourshelves, Isn't it?
2 - If above one is not possible, then how can I bundle only my application specific files and still able to use (bundle separately) minified angular.js file?
What is the recommended approach here?
In your config.js file you can map any file with a name and have it imported by SystemJs in the browser
So you could potentially do something like
"angular": "jspm_packages/...../angular.min" (The path to your file)
However the recommended approach would be to bundle and minify all your vendor files and as you mentioned, bundle your application specific files separately
You can do this with something like Gulp or Grunt to generate the 2 files
There are lots of examples online of how to do this but here is one to get you started
https://blog.dmbcllc.com/using-gulp-to-bundle-minify-and-cache-bust/
Once you have generated both files you add them to your html page via a script tag
<script src="Your File Path"></script>
Option 2 is the preferred approach and I would recommend spending the time to get setup as you only have to do it one time to get your head around it
Related
I am new to webpack plugins and I understand that there's this html-webpack-plugin that allows users to customize the process of webpack generating html files.
Similarly I am trying to find a plugin for .vue files, that allows me to have access to the .vue files at the process of webpack trying to load them into .js files. (I may need to do some global modifications to .vue files before they are converted.)
Where do I start looking ? Is there already a plugin that serves the purpose ? Any advice is appreciated!
guess you want get source code of vue files before converting to js, you can custom a loader to process .vue files before they got changed in vue-loader.
I have a project that uses source files external to the project. Effectively, there is the actual project source code (an Typescript/Angular 2 application, lets call it the 'core' stuff), and this is a generic web application that is meant to be the base code that consumes these external source files.
The external files include additional stuff-- that could be SCSS files, images, evn additional JS. The way I want this to work is that webpack copies these external files from any source directory (this is critical, it is not part of the core project) to a local .tmp directory. The files in the .tmp directory are worked on along with the core src files to generate the prod output.
I can't figure out how to add these additional external source files to the watch list. Effectively what I'm looking to do is watch that directory and as things change, it re-copies the affected files to the local .tmp directory and triggers a recompile.
Presently I have to restart webpack and have a very very ugly solution using Grunt to watch the additional files. It's nasty but these kinds of workarounds have historically been what I've had to do with webpack.
Does anyone have a better solution? Ideally I'd like to not have to mix grunt with webpack. Webpack should be able to do this, but its hard to know whether there's an existing plugin for this or what the best approach would be.
Also, please spare the "look for it on google" or "read the docs" comments. I've combed through it all, hard, and have not found anything.
Thanks in advance.
As of now Webpack doesn't watch external files out-of-the-box . You need a plugin for that.
Basically idea is to have a file watcher module chokidar / watch , listening to the file change , and when there is a change, restart the webpack compilation phase . Webpack plugins can access the compilation object and we you need to hook it to a compiler phase i.e. 'emit' , 'after-emit' etc.
This Webpack plugin exactly solves your problem - https://www.npmjs.com/package/filewatcher-webpack-plugin .
I have created two script bundles for my jquery js files and bootstrap js files and a content bundle for all css files. What about my js files which i have used in my app and other application folders? Can i do bundle and minify those application's js files using bundle.config of my MVC Project? I am little confused what to bundle and what not to bundle and what project structure to follow ? Any help will be highly appreciated. Does bundle.config automatically does the minification of files?
You can create bundles per view, that include all the css or js for that view. You can bundle all the scripts, except the one that are pulled from cdn. The minification do not happen by default, you need to set BundleTable.EnableOptimizations = true;.
Try to obtain the third-party libraries already minified, and put it on the scripts folder using .min.js suffix. asp will use that files instead of minify the current sources.
example:
jquery.signalR-2.2.0.js // this on the bundle
jquery.signalR-2.2.0.min.js // on optimization mode asp will use this library
I am playing with the yoman trying to build a web site using the webapp generator.
If Managed to create a web site that works under grunt server, when I change a js file grunt notices the change change and does a live load and everything works as you would expect.
When I try a plan grunt, it attempts to run the dist task, it manages to include my html files, but skips any of the javascript or script files I created in the script and styles diretores. I assume its the case I have to tell grunt to includes these files
Files such as main.js seem to make it through, but there are no references to main.js in the Gruntfile, so I not sure which part of Gruntfile.js to change.
Doing a yo doctor reports
[Yeoman Doctor] Everything looks all right!
Q. How to do I tell grunt to include and user created files.
Q. I noticed that all my image files where renamed, fair enough how do I refer to a file that I known is going to be renamed in a javascript file
Q. Does anybody known a good web resource for yoman where these quesion might have already been answered?
Be careful on this glob pattern scripts/{,*}/*.js. This takes only the js files that are inside scripts or immediate child folders.
Make sure to change it to scripts/**/*.js to include all js files in all subfolders.
Also get an idea on tags build: css, build: js in your index.html, wiredep plugin used by Yeoman in gruntfile to understand what files will be injected into dist folder.
I have a RoR project in which i have several assets that i don't want them to be precompiled in production mode. These assets are compound by JS/CSS files and currently they are placed under app/assets/javascript/ism/.
Actually, it's the whole ism folder which i don't want to compile. Though in development mode it's useful and comfortable to keep those files there to work with them, in production mode they shouldn't be there. In production mode those files are all compiled (externally) in a separate file which is served by S3 ant not from RoR/Nginx. The externally compiled file is even linked manually, not by RoR.
<script type="text/javascript" src="http://s3.blabla.com/file_compiled.js"></script>
So, what should it be the best way?
It's less than perfect, however you can prevent these files from being compiled by moving the ism directory out of the asset pipeline and serving them statically. E.g moving /app/assets/javascript/ism/ to /public/ism/.
If you don't want these files on production at all, you could simply add public/ism/* to your .gitignore file (assuming you're using git).