0

I'm trying to decrease the bundle size of my Vue project, which scaffolded by the vue-cli, by using CDN of firebase, Vue, and Vuetify.

So, I've added links of these CDN in public/index.html as follow:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>magiclabel</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but t4v4 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Add config.externals to vue.config.js as follow:

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  chainWebpack: (config) => {
    config.externals({
      firebase: 'firebase',
      'firebase/auth': 'firebase',
      firebaseui: 'firebaseui',
      vue: 'Vue',
      vuetify: 'Vuetify',
      'vuetify/lib': 'Vuetify',
    })
  }
}

Then, the report.html created by issueing yarn build --report indicated that the Vuetify is still in the bundle even other firebase and Vue is going away as follow:

enter image description here

Is there any wrong or insufficient steps?

1 Answer 1

1

If you are using vuetify from vue-cli-plugin-vuetify (vue add vuetify), treeshaking and auto component import is enabled by default, by using vuetify-loader.

If you look into the source code of vue-cli-plugin-vuetify, it only uses vuetify-loader if it is present in your package.json. So removing vuetify-loader from package.json should disable this behavior.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.