add cdn assets

iczer · Sep 14, 2020 · 4c7c5c1 · 4c7c5c1
1 parent e414f89
commit 4c7c5c1
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git 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>
diff --git 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/[email protected]/dist/vue.min.js',
+    '//cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
+    '//cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
+    '//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
+    '//cdn.jsdelivr.net/npm/[email protected]/nprogress.min.js',
+    '//cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js',
+    '//cdn.jsdelivr.net/npm/@antv/[email protected]/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