CODEWITHSUNDEEP
phplaravelvue.jsvuetify.js
Jim E Russel
Jim E Russel

Reputation: 495

Vue / Laravel - Importing CDN vuetify instead of npm install

Since I wanted to reduce my app.js file size, will it be possible to import a CDN/UNPKG vuetify inside my app.js? Will the load time be the same if I import it locally (npm install) and through cdn?

I managed to reduce it by using the cdn for css, icons and fonts but not for the whole package.

I tried this method and it doesn't work.

Welcome.blade.php

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

  </head>
  <body>
    <div class="content">
            <app id="app"></app>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
        <script src="{{ asset('js/app.js') }}"></script>


  </body>
</html>

App.js

window.Vue = require('vue')

import Vue from 'vue'
import VueRouter from 'vue-router'
import 'vue-nprogress'

import App from '@/App.vue'
import routes from '@/routes.js'

Vue.use(VueRouter);

Vue.component('base-table', () => import('@/components/BaseTable.vue'));

new Vue({
  el: '#app',
  render: h=>h(App),
  vuetify: new Vuetify({
    theme: {
      themes: {
        light: {
          primary: '#1565C0',
          secondary: '#b0bec5',
          accent: '#8c9eff',
          error: '#b71c1c',
        },
      },
    },
  }),
  router: new VueRouter({
    mode: 'history',
    routes: routes,
  })
});

Upvotes: 1

Views: 2551

Answers (1)

Jim E Russel
Jim E Russel

Reputation: 495

I moved my Vue, VueRouter and Vuetify externally. From 1.74 MB, down to 57.5 kb. That's a huge improvement for my app.js file.

enter image description here

Thank you very much to @jonrsharpe and @apokryfos

Webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, 'resources/js/')
        }
      },
      externals: {
        'lodash':'_',
        'vue':'Vue',
        "vuetify": "Vuetify",
        "vue-router": "VueRouter",
     },
    });

Welcome.blade.php

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

  </head>
  <body>
    <div class="content">
            <app id="app"></app>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
        <script src="{{ asset('js/app.js') }}"></script>

  </body>
</html>

App.js remains the same

Upvotes: 3

Related Questions