search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

Possibility to host dependencies from CDN instead of bundling them into the app #5334

Open Mikilll94 opened 4 years ago

Mikilll94 commented 4 years ago

What problem does this feature solve?

Right now when running npm run build all CSS and JavaScript dependencies inside node_modules are bundled into the output file. This significantly increases bundle size. Instead when creating new project there should be a possibility to specify that I want to have all my dependencies hosted from the CDN server.

Like this (I know that this example for React, but it does not matter)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  <script type="text/javascript" src="https://unpkg.com/@umds/object-assign@4.1.1-beta.24/object-assign.js"></script>
  <script type="text/javascript" src="https://unpkg.com/react@16.1.1/umd/react.development.js"></script>
  <script type="text/javascript" src="https://unpkg.com/react-dom@16.1.1/umd/react-dom.development.js"></script>
  <script type="text/javascript" src="https://unpkg.com/redux@3.7.2/dist/redux.js"></script>
  <script type="text/javascript" src="https://unpkg.com/react-redux@5.0.6/dist/react-redux.js"></script>
  <script type="text/javascript" src="https://unpkg.com/react-router-dom@4.2.2/umd/react-router-dom.js"></script>
  <script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>

What does the proposed API look like?

When creating project add a question:

What to do with dependencies when building for production?
- Bundle them all into the output file
- Add them as links to CDN
LinusBorg commented 4 years ago

There's a webpack plugin you can use for that:

https://www.npmjs.com/package/webpack-cdn-plugin

I don't think we should make such a feature part of Vue CLI itself though.