I have been loading so many JS and CSS in my project.
To improve my site performance, I started with YUICompression integrated with Ant build.
So each time when I build the project it creates minified file with appending"-min.js"
Example: myscript.js after build, new file "myscript-min.js".
Now I have changing all the files to load myscript-min.js in my pages.
Is there any automation or simpler way to load the minify file.
Thanks in Advance!!!
In your code, try to determine the environment (production or development) from where you're loading the page. For instance, when developing on a local machine, you can check your IP address, a server environment variable (using Apache SetEnv), script path, etc. Using that data, either load the minified script (in production environment), or the separate scripts (in your development environment).
I am assuming that you're using a server side scripting language, like PHP. If you're serving static HTML files, it gets a bit more tricky (I'm thinking dynamic javascript loading or something).
If you (can) use PHP in your project then have a look at the minify project. It takes care of most of the chores. You are free to use uncompressed versions of your CSS and JS files, minify will compress them on-demand when these files are requested over HTTP.
If you're using PHP, just do the following:
Edit the apache config file on your production machine and add this line to httpd.conf (restart apache afterwards). On a shared hosting you should try .htaccess if you don't have access to httpd.conf.
SetEnv ENVIRONMENT production
This simply adds a variable to apache telling your that you're running in production mode. On your development machine, change the value "production" to "development" or whatever makes sense to you.
Then in your PHP file, you can switch between loading the full JS files and the minified one, like so:
if(isset($_SERVER['ENVIRONMENT']) && $_SERVER['ENVIRONMENT'] == "production")
{
... production minified JS here
}
else
{
... development unminified JS here
}
Related
For my web app, I am using Express, Node.js in the backend, and in the front-end I am serving some HTML files. I am not using any front-end framework.
In the backend, I am specifying the front-end files' location with:
app.use('/public', express.static(path.resolve(__dirname, "../public")));
In the public folders, I am placing all the front-end HTML files. I also have some Express routers to serve users the correct files:
router.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "../public/html/main/example.html"));
});
In example.html file, it is requiring a JS file <script src="/resource/js/script1" async></script> Inside script1, I am using a public key pk_test_wefwefeweffwe. That key is only for development. For production, I need a new key pk_live_woefiweoifnweoif. For now, whenever we deploy live. I have to change that key manually. I am wondering if there is an automatic way of doing it.
In the node.js backend, I can detect whether we are in production or development with process.env.NODE_ENV. But that is not possible to detect in a front-end JS file such as script1. I thought of serving different HTML files depending if the backend environment is prod or dev, but that seems a little tedious, since I have to update the HTML/JS file every time I make a change.
Is there a convenient method of making/serving different front-end files (or modifying a part of the front-end file depending if the environment is prod or dev) depending if the environment is prod or dev?
You have two choices:
Compile time
If you're running a build for your UI you can replace environment variables at compilation time (Webpack and Rollup and all others should have the ability).
Advantages: No special system to read env vars. Can do compile time differences for different envs (e.g. source maps or dev builds with more debugging for dev env). No server required to dynamically insert the right env vars.
Disadvantages: Can significantly complicate deployment pipelines particularly needing to create Docker images for each env rather than promoting a single one through.
Run time
You pass your env vars by either manipulating the served HTML in <head>:
<script>
window.__ENV = { someEnvVars: 'nice' }
</script>
Or by adding to your HTML <head> in the front end files:
<script src="envvars.js"></script>
And then detect if this file is being requested on the NodeJS server and return window.__ENV = { someEnvVars: 'nice' } as the content dynamically.
Advantages: Simple deploy pipeline in professional Docker type situations. No need for special front end build tools to replace variables.
Disadvantages: Requires a server to dynamically insert the env vars (your app is less portable and can't simply be run on any server which can serve static files). Have to make one production worthy build (NODE_ENV = 'production') for all envs (less debugging output in React for example).
I am trying to use the bundles feature in ASP.NET MVC in my project, everything works great in my local, if I switch the compilation debug property to false I can see that the bundle is being generating with a version (v=XXXXXXX) and my application keeps working.
When I deploy the application to a server and request the page, the bundle is there but the v= value is empty. Is there anything I am missing?
<script src="/bundles/bundlename?v="></script>
One of the possible cases you have is with optimization side of bundles. I had the same issue with my scripts and styles when I started to use minified versions. For example, if I specified in bundle configuration with .min.js file then you can fall into problem when optimization framework minifies already minified script(s). And it also occurs only in release mode. I solved it with BundleTable.EnableOptimizations = false; in BundleConfig.cs file after all bundles' configs
I think you miss specific root path since locally its not the same vs server side.
Why don't you use the script helper from the framework:
#Scripts.Render("~/bundles/bundlename")
I found the issue, after trying everything I went back an check the build scripts on the TFS server, we have continuous integration configured, turns out the build server was removing the .js and only letting the .min.js files on the final build. I removed that instruction and it started working.
Basically the .js did not exist on the server so there was nothing to bundle.
Thank you guys for your help!
I wrote a small single page application in BackboneJS and not sure how to get it into production. I typically use grunt serve command and it runs everything and displays to localhost:9000.
How do I do this on a production server so I can access the app from www.example.com.
Backbone apps are all static files man, so you can put it in a CDN or just have apache/nginx serve them as static files.. Doesnt get any simpler than that really.
Get a server
Install nginx/apache
Configure nginx/apache to use your example.com and link it your /path/www/your-backbone-app
Copy over your dist/ directory to /path/www/your-backbone-app
i really suggest you minify the hell out of your html/css/js since you said your backbone app is all one "page". Make 1 js file with everything inside (look into require.js and "r.js").
Profit!
Your best choice is to do it all in your computer: require.js can do all of this automated! ->. join and minify all that apply, change the html code to reflect the new minified names of the css and js, zip. Finally run this from the console scp -r ~/yourapp/dist/ server:/path/www/your-backbone-app. Greatest thing of all this is you dont have to do anything else after that command. Enjoy.
I have previously relied on .NET to optimize (concatenate, minify, version) css and js files in my MVC apps. I recently added grunt to my solution which I've wired in to build events to concatenate, minify, etc. these files and my app will use these grunt-generated files.
The remaining concern I just realized, however, is versioning. When .NET optimizes a file, they also implement versioning. It looks like I can just include the gulp-generated files in bundles to handle the versioning, but is there a different way?
Thanks in advance.
I'm handling it in my deployment script. When a deployment is triggered, the deployment script gets the commit sha (deploying via git) and injects it into a web.config setting.
Then inside my Layout file I will reference the css/js files with /css/app.min.css?version=AppSettings["version"]
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).