vue.js - 如何避免从 CDN 捆绑 Vuetify 和使用？

问题描述

我正在尝试通过使用 firebase、Vue 和 Vuetify 的 CDN 来减小由 vue-cli 搭建的 Vue 项目的包大小。

所以，我在下面添加了这些 CDN 的链接public/index.html：

<!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/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

添加config.externals如下vue.config.js：

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

然后，通过发出的report.html创建yarn build --report表明即使其他 firebaseVuetify仍然在捆绑包中，并且 Vue 正在消失，如下所示：

是否有任何错误或不足的步骤？

标签： vue.jswebpackvuetify.js

如果您从vue-cli-plugin-vuetify( ) 使用 vuetify，则默认情况下会启用vue add vuetifytreeshaking 和自动组件导入，使用.vuetify-loader

如果您查看的源代码vue-cli-plugin-vuetify，它仅vuetify-loader在它存在于您的package.json. 所以删除应该禁用此行为vuetify-loader。package.json

vue.js - 如何避免从 CDN 捆绑 Vuetify 和使用？

问题描述

解决方案

推荐阅读