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
Related
Since Laravel 5.4, the default method to compile assets is using Laravel Mix, instead of elixir.
I know that "Mix" uses WebPack by default to compile the assets.
What benefits does this method bring?
The Mix also allows you to compile without WebPack, and this always
produces files that are smaller in size and work the same.
This is entirely incorrect. Have you attempted to configure any of the myriad options to optimize your bundle at all?
Start with the webpack-bundle-analyzer plugin. This will give you an idea where your bloat is, what is duplicated, and where to start trimming your application.
Between uglifying, chunking, deduplification, minification, etc. you'll have in the end compiled resources that are far from "large".
Now I'll grant you it has a steep learning curve comparative to other tools, regardless, WebPack is an incredibly powerful tool, you need to take the time to learn it's configuration capabilities.
Care to elaborate on what you mean by working the same? I run several production applications as well as a number of smaller personal projects. I never seem to get different results after each build.
But in the end it's just a tool. A tool like any other tool, you use what you feel comfortable with and what fits for the job. There's a reason it as selected as the default, though. And it isn't because the maintainers are ignorant by any means.
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.
can anybody help me?
My Angular 2 application is taking a long time to initialize.
There are only 16 requests.
And despite the relatively high size of 3 mb, the problem is not to bring the files.
I'm referring to the time after getting all files.
On my notebook are 3 to 4 seconds, which I believe is a high time since I have only 10 components, 1 pipe, and 6 directives for now.
The idea is that the application has close to 200 components.
Then I will create lazy loading.
But for 10 components I think it should be faster.
On the cell phone the standby time reaches 10, 12 seconds.
On the iPad the wait is relatively large as well.
Above 15 seconds.
I am using webpack, minifying css and js.
Even using pre-render on the server (asp.net core).
This delay occurs after all files are downloaded.
That is, it is an angular 2 processing time to render the screen.
What else could I do?
What could I have done wrong?
The test link:
http://projetos.codegenerator.com.br/angular2/
Thanks.
I think you are not using any bundle tools like webpack, systemjs..
When you deploy your ng2-app, you should use AOT(ahead of time) compile.
I guess you are using JIT(just in time) compile.
In angular2 guide page,
With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
When you use JIT compile, your browser will download vendor.js which is defined by angular2 compiler and it will compile your app just in time. It will be too slow and your client have to download vendor file. When you use AOT, you dont have to use vendor file, so resources are being smaller.
I recommend to use AOT compile when you deploy your app, and use lazy loading for resource size.
If you are curious about ng2 AOT compile, read this guide.
angualar2-cookbook-AOT
And here is example angular2 app with webpack2 and lazy load.
use file structure and config files in here.
When I tested with example app, files bundled with aot was smaller than 500KB.
angular2-webpack2-aot
Angular 2 is well tested for its performance, If there is anything lagging its on the application and its dependencies..
Check your environment, If there are only few component then there is nothing wrong on the framework side.
Webpack or any other build tools has nothing to do with the performance , coz they are development dependencies,
If you are using cdn's for some third party services or libraries, check whether their services are on time.
I finally got the performance I wanted in the application.
It took a bit of work but really worth it.
Configure your application to compile in AOT, really the performance gain is worth it.
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.
Disclaimer: I know almost nothing about servers. Sorry if this question doesn't make sense in the first place.
I'm building my project in Node.js with CoffeeScript and Stylus and some other compiled stuff. Until now I've made a script to compile my code into regular JavaScript and CSS, then run it. I'm planning to upload the compiled assets to the production server, so there's no trace of CoffeeScript or Stylus anywhere afterward.
But I know that it's possible to directly run server-side CoffeeScript (coffee app.coffee), and that there are middlewares in Node which compile and minify client-side CoffeeScript and Stylus on the fly.
My question is, why let the server do it each time, instead of compiling the code ourselves? Wouldn't the first option add more strain on the server for no reason?
Thanks.
It would not add strain on the server. An educated guess would tell me that one it compiles and minifies your CoffeeScript it caches the result for each subsequent request.
Manual processes introduce risk and probability of error.