Is it possible to deploy Vue.js from a content delivery network (CDN) for production

My decision to use Vue.js for a new project was influenced by its ability to run natively in the browser, unlike React which requires compilation/transpilation via Node. I'm considering linking directly to a CDN like this in my production code:

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b1d1e0e2b594559455a">[email protected]</a>"></script>

A colleague mentioned that this approach may only be suitable for development, as unpkg could be transpiling on the fly (potentially impacting performance). However, it appears to work fine for me. I also have the option to link to a more robust CDN like this one, but I want to ensure that I'm not violating any best practices by bypassing a Node build system (such as webpack).

javascriptvue.jscdn

Answer №1

Is there any downside to using a CDN like this in my live code?

There is absolutely no reason not to utilize a CDN in production. In fact, it is often the recommended method for delivering content in a production environment, especially with widely-used packages such as jQuery, as most users would likely already have loaded and cached these resources.

A colleague suggested that CDNs might be more suitable for development only, and that unpkg simply transpiles on demand (which may impact performance).

This assertion is completely false - that's precisely why we use CDNs! :) While the choice ultimately rests with you, it is crucial to remember that working with a specific version of the library during development is essential. Opting for the latest version of a codebase exposes you to untested changes pushed to the repository, potentially leading to clients receiving unverified updates.

To mitigate risks, stick to a designated version you are familiar with, relax with a beer, and get some rest :)

Updated (18.10.2022): Global caching is no longer effective

This information has actually been circulating for some time now, but was never properly addressed until now. The bottom line is that caching operates on a per-site basis. For further details, refer to this link (special thanks to @Baraka's comment).

Regardless, relying on CDNs for deploying in a production setting remains the most favorable approach!

Answer №2

Here are some helpful tips:

<!-- For development version -->
<script src="https://unpkg.com/vue"></script>

<!-- For production version -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

This will ensure that Vue.js stays up to date automatically.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

I am currently developing a Vue.js application using the Vuexy theme. One issue I have encountered is with a datetimepicker within a modal. The problem arises when I try to select a date on the datetimepicker component - it closes the modal instead of stay ...

javascripttypescriptvue.jsvuetify.js

Concealing other items in an array on selecting one item in React Native- A step-by-step guide

Currently, I have set up my view to display an array of items (Circle components) as shown in the image below: However, I am facing a challenge in hiding all other Circle components when I click on one of them. The onPress event is configured to zoom in a ...

javascriptreactjsreact-native

Are you looking to convert this JSON using underscore or any other JavaScript utility tool?

Looking at this JSON data: [{"target": "mydata.12.2", "datapoints": [[763.7, 1368821100], [762.1, 1368821160], [223.11, 1368821220], [886.54, 1368821280], [112.3, 1368821340]]}] I need to strip the first key and square brackets so it appears like this: ...

javascriptjsonunderscore.js

Using JQuery toggleclass to add transitioning effects to a :after element

I'm using the toggleClass function to add the class .expend to a div with an ID of #menu, which increases the height of the menu from 100px to 200px with a smooth transition effect. I also have a pseudo-element #menu:after for aesthetic purposes. My ...

javascriptjqueryhtmlcss

The automatic refresh feature of the DataTable every 30 seconds is malfunctioning

Currently, I am implementing an application that retrieves records from a database and populates them into a dataTable using JSON. Although my app is functioning correctly, I want to refresh the table every 30 seconds and update any added or modified rows ...

javascriptjquerydatatables

Designing templates for websites and applications using node.js

Simplified Question: As I delve into improving my skills with node.js, I'm exploring the concept of templating. How would using node to serve one HTML file and loading page-specific information through AJAX/sockets impact performance and design princ ...

javascripthtmlmodel-view-controllernode.js

Iterating through HTML table data using a JQuery for each loop

Currently, I have an HTML table that is structured in the following way: <div class="timecard"> <h3>tommytest</h3> <table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;"> < ...

javascriptjqueryhtmlfor-loop

An unusual error occurred stating that the `forEach` property does not exist on the given type

I am working on a chess game and encountering some Typescript errors that I'm struggling to comprehend. The issue arises in the following class method: clickEvent (e: MouseEvent): void { const coordinates: ClientRect = this.chessBoard.getBounding ...

javascripttypescript

Adding routes dynamically in nodeJS using Express is a powerful way to manage your server

Is there a way to dynamically add paths to nodeJS within a running program? Instead of relying on kludged solutions like resetting the server when files change, I am looking for a more efficient method. Any suggestions? EDIT: This project is focused on pr ...

javascriptnode.jsexpress

Using the PUT method in Node.js to set the ID

Need help with setting ID value from frontend apiRoutes.put('/intake', function(req, res) { Intake.findById({id, function(err, intake) { if (err) res.send(err); check : true; intake.save(function(err) { ...

javascripthtmlangularjsnode.js

The properly grouped image failed to load

I have a React component designed to showcase an image, with Webpack handling the bundling process. It's important to mention that I am utilizing ReactJS.NET in this scenario. Even though the webpack bundle is successfully generated and the .jpg fil ...

javascriptimagereactjswebpack

Is it possible to determine if an AJAX request is still ongoing when a user returns to a webpage using jQuery or JavaScript?

Users on a specific page must click a 'generate' button to create details for a record. When the button is clicked, an ajax request is triggered to generate the record, which may take some time. $("#generate_record_button").on("cl ...

javascriptjqueryajax

The navigation is designed to only show up as I scroll down the page, but ideally it should be visible

I am trying to make the navigation bar appear on page load instead of when I scroll down the page. Currently, I am using this jQuery code: <script type="text/javascript> $(document).scroll(function() { if ($(this).scrollTop() == 20) { ...

javascriptjqueryhtmlcss

A beginner's guide to utilizing querySelectorAll in VueJS

I want to track GA events using Nuxt, but I'm facing an issue where only the first event is being returned due to the use of document.querySelector instead of querySelectorAll. I've tried using the spread operator and a for() loop without success ...

vue.jsnuxt.js

Scrolling through four limited list items automatically

Hey there! I am currently working on a design project. You can check it out here. I'm trying to replicate a section from another site, which you can see here. <div class="latest-winners-container"> <h3 class="header">Latest Winners< ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to create a list from a matrix using JavaScript?

I have an array structured as follows: const input_array= [ ["red", "green"], ["small", "medium"], ["x", "y", "z"] //... can have any number of rows added dynamically ...

javascriptvue.js

Unable to add the div using a jQuery click event

Hey there, I'm looking to add a div dynamically when clicking on another div. Check out the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title></title> <script src= ...

javascriptjqueryhtml

Is there an issue with loading CSS and JavaScript in mobile view on a website built with CodeIgniter?

My experience with codeigniter has been great so far, but I encountered an issue when trying to view my work on different devices. Here is the problem: Web: Broswer View | Browser (Responsive Design View) Mobile: Screenshot 1 | Screenshot 2 _htaccess: ...

javascriptphpcsscodeignitermobile

I'm experiencing some compatibility issues with my script - it seems to be functioning correctly on desktops but not on mobile

Below is a script I've implemented on an html page to toggle the visibility of divs based on user interaction. <script> $(document).ready(function(){ $("#solLink").click(function(){ $(".segSlide").hide(), $(".eduSlide").hide ...

javascriptjqueryhtmlcss

When a new element is introduced, onmouseenter feature assigns a unique dynamic function variable

I am incorporating elements generated by Javascript using a for loop. My goal is to pass different variables to a function for each element. Check out my code snippet: var thumbnail_box = document.createElement("div"); thumbnail_box.onmouseenter = functi ...

javascriptjquery