如何避免捆绑 Vuetify 并从 CDN 使用？

Question

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

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

<!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',
    })
  }
}

然后，通过发出 yarn build --report 创建的 report.html 表明 Vuetify 仍然 在包中 甚至其他 firebase 和 Vue 是离开如下：

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

Answer 1

如果您使用来自 vue-cli-plugin-vuetify (vue add vuetify) 的 vuetify，treeshaking 和自动组件导入 is enabled by default，通过使用 vuetify-loader.

如果您查看 the source code of vue-cli-plugin-vuetify，它只会使用 vuetify-loader 如果它存在于您的 package.json 中。因此，从 package.json 中删除 vuetify-loader 应该会禁用此行为。

如何避免捆绑 Vuetify 并从 CDN 使用？

How can I avoid bundling Vuetify and use from CDN?

webpack

vue.js

vuetify.js