add cdn assets

4 years ago · 4c7c5c1da1
parent e414f89e27
commit 4c7c5c1da1
2 changed files with 50 additions and 2 deletions
--- a/public/index.html
+++ b/public/index.html
@ -6,12 +6,20 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- require cdn assets css -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+      <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+    <% } %>
  </head>
  <body class="beauty-scroll">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
+    <!-- require cdn assets js -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+      <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/vue.config.js
+++ b/vue.config.js
@ -2,6 +2,33 @@ let path = require('path')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
 const {getThemeColors, modifyVars} = require('./src/utils/themeUtil')
 const {resolveCss} = require('./src/utils/theme-color-replacer-extend')
+
+const isProd = process.env.NODE_ENV === 'production'
+
+const assetsCDN = {
+  // webpack build externals
+  externals: {
+    vue: 'Vue',
+    'vue-router': 'VueRouter',
+    vuex: 'Vuex',
+    axios: 'axios',
+    nprogress: 'NProgress',
+    clipboard: 'ClipboardJS',
+    '@antv/data-set': 'DataSet'
+  },
+  css: [
+  ],
+  js: [
+    '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+    '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
+    '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
+    '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
+    '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
+    '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
+    '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js'
+  ]
+}
+
 module.exports = {
  devServer: {
    // proxy: {
@ -30,16 +57,29 @@ module.exports = {
        resolveCss
      })
    )
+    config.externals = isProd ? assetsCDN.externals : {}
  },
  chainWebpack: config => {
    // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
-    if (process.env.NODE_ENV === 'production') {
+    if (isProd) {
      config.plugin('optimize-css')
        .tap(args => {
            args[0].cssnanoOptions.preset[1].colormin = false
          return args
        })
    }
+    config.plugin('html')
+      .tap(args => {
+        args[0].title = 'Vue Antd Admin'
+      return args
+    })
+    if (isProd) {
+      config.plugin('html')
+        .tap(args => {
+          args[0].cdn = assetsCDN
+        return args
+      })
+    }
  },
  css: {
    loaderOptions: {
@ -51,7 +91,7 @@ module.exports = {
      }
    }
  },
-  publicPath: process.env.NODE_ENV === 'production' ? '/vue-antd-admin/' : '/',
+  publicPath: isProd ? '/vue-antd-admin/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false