When testing realtime changes to my app using the grunt serve It takes between 6 to 10 seconds for the changes to show/update in the browser.
I used grunt serve --verbose to check for what task takes more time than other and found the folowing tasks consume most of the load time (in descending order);
concurent:server
grunt-contrib-imagemin
grunt-karma
grunt-google-cdn
Since I don't use cdn I removed it from Gruntfile.js but it still called; which is a bit confusing :( so I removed it also from the package.json and it disappeared.
So my questions are.
How to speed up the grunt serve to reload the browser instantly? but also preserve all "juice" of useful tasks (minify, uglify, imagemin..) when using grunt build.
Why when I disable a task on Gruntfile.js it still loads?
Thanks :)
Apparently, this post: Grunt LiveReload is really slow discusses the same problem and I believe it solves it. I'm yet to try it out and update this post if it helps.
Related
I am creating a react website. Its almost ready but when I am debugging it, its load time is 1.2 Minutes and bundle size is 28 MB.
I have tried following solutions without success so far:
https://medium.com/#rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a#.qfpspcha4
https://hackernoon.com/optimising-your-application-bundle-size-with-webpack-e85b00bab579#.t3vabgy27
How to minimize the size of webpack's bundle?
Did you try changing your devtool setting? I believe inline-source-map is the reason for the large file size. More info on the different devtool settings here. For production I personally use devtool:'cheap-module-source-map' and have great success with it. I hope this help some, webpack can sure be frustrating at times.
Also to have a lighter dev build I would suggest to use devtool:'eval', It's probably the most efficient as far as development goes.
I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine
I'm using Browserify with Gulp in my front-end environment. Recently I'm using watchify also, and it has magnificently improves of bundling speed. However it still pretty slow on first bundling, it takes about 10~13 seconds in my computer.
Common modules are bundled seperately with named vendor.js, but not much change. Once I used Webpack on different project, and it was super fast and I was quite suprising. I really love using Browserify and think that there must be a way to faster than now.
Is there a something to browserify faster than now? I'm not expecting faster as Webpack, just, you know, 10~13 is long long time, so I want to reduce it as possible as I can. Any advice will be very appreciate!
I solved by intergrating with Persistify, which saves latest bundle data to the disk, so you can run much more faster everytime you restarted the task.
But it still slows at first time XD
I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.
So I am using the Aurelia skeleton-navigation starter as recommended. However, when I run the gulp bundle task the application will no longer load the main UI, it get's stuck on the spinner/loading page. I found this issue but even after installing the jspm beta it still doesn't seem to be resolved. Anyone had any luck? For what it is worth, I do not even see an aurelia.js bundle being created in the /dist directory so the 404 certainly makes sense in that respect.
So I have a fix, I am not thrilled with it though. It seems if you run bundle then run gulp watch to start the webserver, that the bundled files get wiped out from the dist folder. Running gulp watch in one command window and gulp bundle in another results in it working correctly as the bundled js is there at that point. I hope for a better fix from someone, this seems kind of hacky.