I recently moved to webpack from require.js and some node_module have .min files built in. When I use a file from node_module I just do require('my-module') and it loads it right away without any config. But this will load the development version or a bigger version.
For example react is loaded require('react/addons') but this is not the minified version.
My question is:
Should I load modules normally and then minify everything?
Should I use their .min files provided and then minify everything again? (in this way I save a lot of disk)
Any better way? Would be nice to automatically loade minified files.
For now, I'm changing the aliases of webpack to load the minified version when building the app:
myConfig.resolve.alias.phaserUnFixed = "nodeModules/phaser/build/custom/phaser-no-physics.min.js";
myConfig.resolve.alias.react = "nodeModules/react/dist/react-with-addons.min.js";
myConfig.resolve.alias.lodash = "nodeModules/lodash/dist/lodash.compat.min.js";
myConfig.resolve.alias.moment = "nodeModules/moment/min/moment.min.js";
But this is not a good approach either... Can you think of anything better?
I don't know if this is the answer you're looking for, but I think the best practice in this case would be to use webpack to uglify it for production and not worry about loading minified files. Having webpack run uglify on the whole bundle will prune out all unused codepaths then minify it anyways.
Related
Is there a way to combine ALREADY MINIFIED JavaScript files into a single file?
When my page loads I get lots of queue time. How can I reduce that?
Thanks
Well, depends on the framework that you are using.
If you are using an ASP. NET application you could add all the javascript files to BundleConfig.cs and set EnableOptimizations as true.
Doing this would significantly reduce the load time.
I installed the Polymer Starter Kit Light and am writing my first Polymer application.
I noticed that under bower_componets/polymer I have polymer.html, but the file has no indentation at all. I would love to follow the code and see what's going on, but the lack of indentation makes it less than ideal.
Running a simple bower install polymer gives you the same files.
In the GitHb project, https://github.com/Polymer/polymer , I cannot even find polymer.html.
So:
How is Polymer's code structured? How is the polymer.html generated?
How can I get a debug and tinker-friendly version of Polymer?
Polymer has development branches and releases.
If you bower install Polymer/polymer#master you get the master branch, which is very much like what you see in the GitHub repository.
If you bower install Polymer/polymer you get the latest release, which has been minified (only necessary files, and those files are combined and compressed) for your production benefit.
I'm afraid Polymers a bit complicated because it loads parts of itself dynamically, using the this._addFeatures function.
If you track back starting at Polymer.html, you will see it imports Polymer-mini.html which in turns imports Polymer-micro.html, which I think then loads something from the library.
polymer.html is imported in almost all the components. So even if you change the path in your element, it will be attempted to be imported from bower_components in some other element.
From what I understand, the HTML imports system keeps track of already imported items to ensure same code is not run twice. If you have polymer.html in two different path, it might attempt to run it twice and might lead to some issues.
So it is better to leave it in bower_components.
You can also try polygit (http://polygit.org/), if you are just playing around with polymer. Below is the sample plunker with polygit
http://plnkr.co/edit/QkxrrFHYZRnlHuZVNIgy
e.g.
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
I am developing a single page application. It is all pure html / css / javascript and I am just starting to set up my gulp file. I figured out how to concatenate and minify my css and javascript into one main file and I just am wondering on workflow with this scenario.
The pros :
its going to make my app run faster
The Cons :
During development on my localhost, it makes it hard to track down line numbers and files when its minified / concatenated.
Some questions:
Has anyone developed a good gulp workflow that allows concatenation /
minification that doesn't impede workflow during production?
That serves only concatenated / minified file on staging or live server?
Or do you just wait until close to testing the site and then allow concatenation / minification and change all your links to point to
the single main css / js file?
Note : keep in mind this is a single page application without any server-side coding or JS MVC
Thanks for any suggestions,
david
I am trying to import several SCSS files(page1.scss, page2.scss and ..) in my app.scss but I haven't found any solution(plugin and etc).
I saw these answers but they are for Ruby on Rails not libsass. I am using:
Gulp,
Gulp-sass,
Libsass and
Laravel Elixir
Any solution?
Long answer short:
As you can find in this issue in the official libsass project github, globs are not part of SASS specification, so there are no plans to support them in libsass.
why?
The main concern about implementing this feature is related with the order importing the files. In first place, AFAIK there isn't a standard way on how reading stream files behave in different OSs (linux, mac os x, windows) or filesystems (reiserfs, ext3, ntfs, fat32, etc.), what leads to a unpredictable ordering while importing the files.
Anyway, even if there will be some sort of cross-platform standard support to read files from every filesystem and you are sure you are always gonna get the files in the same order. Which order should it be?.
if you still need/want it:
Still there are some hack-y ways you can achieve this behaviour but I will strongly recommend to avoid them and follow the official recommendations.
There is a ruby gem: sass-globbing. But it doesn't works with gulp/libsass because of the different way they handle files streams. Inspired on this ruby-gem there is gulp-css-globbing. It looks like this project is a bit outdated, but you can use it on your own risk.
And in this blog post: Sass Directory Imports With Gulp, you can find another solution that involve automatically creating a file per folder that imports all files inside. A bit convoluted for my taste but it will work if you really need this.
I really get big trouble with incremental build (for develop process, in production build, I minified and concatenated files to some files).
My project (angular) have hundreds js file and It's cost me up to 2 minutes to load web page. Root cause: too many requests to get files (> 1000 files).
I have an idea to deal with this problem:
Concatenate all third-party librarys to one file (same as gulp-angular way).
Concatenate (concatenate only, not minify) js files in the same folder to one js file. only build all file in folder when one file which lie in that folder changed (using gulp-cache and gulp-remember).
Do you have any suggestion for me? Try browserify or webpack?
to add to your approach you can incorporate minification which reduces the concatenated file. this further improves performance.