Home Explore Help
Sign In
siqing
/
codenames
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: 优化资源，改依赖为cdn

zhusiqing 2 years ago
parent
b0e5cfb85d
commit
246e56e505
4 changed files with 44 additions and 6 deletions
Split View Show Diff Stats
  1. 5 1
      .eslintrc.js
  2. 6 0
      public/index.html
  3. 6 5
      src/main.js
  4. 27 0
      vue.config.js

+ 5 - 1
.eslintrc.js
View File 

@@ -21,6 +21,10 @@ module.exports = {
 
     parser: 'babel-eslint'
 
   },
 
   globals: {
 
-    'process': true
 
+    'process': true,
 
+    Vue: true,
 
+    VueRouter: true,
 
+    Vuex: true,
 
+    ELEMENT: true
 
   }
 
 }

+ 6 - 0
public/index.html
View File 

@@ -7,6 +7,9 @@
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <meta name="google" content="notranslate" />
 
     <title>codenames</title>
 
+    <% for (var i in htmlWebpackPlugin.options.cdn.css) { %>
 
+      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
 
+    <% } %>
 
   </head>
 
   <body>
 
     <noscript>
 
@@ -14,5 +17,8 @@
 
     </noscript>
 
     <div id="app"></div>
 
     <!-- built files will be auto injected -->
 
+    <% for (var i in htmlWebpackPlugin.options.cdn.js) { %>
 
+      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 
+    <% } %>
 
   </body>
 
 </html>

+ 6 - 5
src/main.js
View File 

@@ -2,14 +2,15 @@ import Vue from 'vue'
 
 import router from './router'
 
 import App from './App.vue'
 
 import store from './store'
 
-import { Message, Loading } from 'element-ui'
 
-import 'element-ui/packages/theme-chalk/lib/message.css'
 
-import 'element-ui/packages/theme-chalk/lib/loading.css'
 
+// import { Message, Loading } from 'element-ui'
 
+// import 'element-ui/packages/theme-chalk/lib/message.css'
 
+// import 'element-ui/packages/theme-chalk/lib/loading.css'
 
 
 Vue.config.productionTip = false
 
 
-Vue.prototype.$loading = Loading.service
 
-Vue.prototype.$message = Message
 
+// Vue.prototype.$loading = Loading.service
 
+// Vue.prototype.$message = Message
 
+Vue.use(ELEMENT)
 
 
 new Vue({
 
   store,

+ 27 - 0
vue.config.js
View File 

@@ -1,3 +1,10 @@
 
+const cdnBaseUrl = 'https://cdn.bootcdn.net'
 
+const cdnConfig = [
 
+  { name: 'vue', scope: 'Vue', js: `${cdnBaseUrl}/ajax/libs/vue/2.6.14/vue.min.js` },
 
+  { name: 'vue-router', scope: 'VueRouter', js: `${cdnBaseUrl}/ajax/libs/vue-router/3.5.3/vue-router.min.js` },
 
+  { name: 'vuex', scope: 'Vuex', js: `${cdnBaseUrl}/ajax/libs/vuex/3.6.2/vuex.min.js` },
 
+  { name: 'element-ui', scope: 'ELEMENT', js: `${cdnBaseUrl}/ajax/libs/element-ui/2.15.6/index.min.js`, css: `${cdnBaseUrl}/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css` }
 
+]
 
 module.exports = {
 
   devServer: {
 
     proxy: {
 
@@ -7,5 +14,25 @@ module.exports = {
 
         'changeOrigin': true
 
       }
 
     }
 
+  },
 
+  chainWebpack(config) {
 
+    if (process.env.NODE_ENV === 'production') {
 
+      // config.externals({
 
+      //   'vue': 'Vue',
 
+      //   'vue-router': 'VueRouter',
 
+      //   'vuex': 'Vuex'
 
+      // })
 
+      config.externals(cdnConfig.reduce((acc, el) => {
 
+        acc[el.name] = el.scope
 
+        return acc
 
+      }, {}))
 
+      config.plugin('html').tap(args => {
 
+        args[0].cdn = {
 
+          js: cdnConfig.map(el => el.js),
 
+          css: cdnConfig.filter(el => el.css).map(el => el.css)
 
+        }
 
+        return args
 
+      })
 
+    }
 
   }
 
 }