Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using CDN vs Installing library by NPM

I recently started using NPM, but I don't understand how the files in node_modules are added to my index.html.

Case 1: CDN

For example, if I want to use jQuery via CDN, it is so simple! I add the CDN link to a <script> tag on my index.html file and $ is immediately available.

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <script> $(document).ready(function(){     $('body').css('background','red'); }); </script> </body>  </html>  

Case 2: NPM

Now I'm trying to use node modules and npm rather than CDNs. I have done the following:

  1. Created package.json by using npm init --yes
  2. Installed the jQuery package with npm install jquery --save

Now, my project folder looks like this: Directory in windows showing a node modules folder, index.html file, and package.json file.

I have removed the script tag with the link to the jQuery CDN from index.html, but I don't understand how to add jQuery from node_modules?

I am doing this on a browser.

like image 477
Deadpool Avatar asked Apr 25 '17 08:04

Deadpool


People also ask

What is the difference between download CDN and npm install?

npmjs(Node Package Manager) is repository consisting node modules/packages. you can search and download node modules from there. cdnjs is Content Delivery Network for JavaScript library files. You can add reference of JavaScript libraries from cdnjs without requiring them to be on your server.

Is it better to download or use CDN?

Because of its very core and design, CDNs can deliver content much speedier to any user and on any device. Whether a tablet or a laptop, your web content gets to each of your users much quickly. This can mean more money for your business! This is perhaps one of the best advantages a website owner gets from CDNs.

Does npm use CDN?

A webservice that dishes out files from npm packages. npm-cdn downloads tarballs from the npm registry and stores them on disk. First-time requests for a package are slow because the entire package tarball has to be fetched, but subsequent requests for files in the same package should be pretty fast.

Should I use CDN or local for production?

CDNs deliver faster loading speeds for readers. A CDN can store content in different formats, which can contribute to faster loading for different users. Because this content is readily available, it is pushed to users faster than would be the case in a local website server.


Video Answer


1 Answers

CDN

Use CDN if you are developing a website that will be accessible by internet users.

CDN Benefits:

  • Will be cached on most browsers because it's used by a lot of other websites

  • Reduce the bandwidth

check for more benefits here

NPM

npm is a great tool to manage dependencies in your app using a module bundler.

Example:

assume using a webpack module bundler and jQuery is installed

import $ from 'jQuery' ... var content = $('#id').html(); 

but the browser does not understand the import statement so you have to transpile the code with Webpack commands, the bundler will check all the used dependencies and bind them in a single file without any dependencies problems.

Useful links: Getting started with webpack

like image 147
Jamil Avatar answered Sep 19 '22 15:09

Jamil