fix: 修改了vue.config.js的配置，同时通过cdn引入常用库，减小打包大小

programmermark · programmermark · commit 301a0d2e7e6c · 2020-06-07T17:18:28.000+08:00
diff --git a/blogvue/.gitignore b/blogvue/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /dist
 /vuespa
+.package-lock.json
 
 # local env files
 .env.local
diff --git a/blogvue/package-lock.json b/blogvue/package-lock.json
diff --git a/blogvue/package.json b/blogvue/package.json
@@ -13,16 +13,19 @@
     "babel-plugin-import": "^1.13.0",
     "core-js": "^3.6.4",
     "css-loader": "^3.5.3",
+    "fibers": "^5.0.0",
     "highlight.js": "^10.0.3",
+    "imagemin-webpack-plugin": "^2.4.2",
     "js-cookie": "^2.2.1",
     "marked": "^1.1.0",
     "mini-css-extract-plugin": "^0.9.0",
     "postcss-loader": "^3.0.0",
     "vue": "^2.6.11",
+    "vue-lazyload": "^1.3.3",
     "vue-meta": "^2.3.3",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"
-  },
+  },  
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
@@ -38,8 +41,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
-    "image-webpack-loader": "^6.0.0",
-    "node-sass": "^4.9.0",
+    "node-sass": "^4.14.0",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11",
     "webpack-bundle-analyzer": "^3.8.0"
diff --git a/blogvue/public/index.html b/blogvue/public/index.html
@@ -6,6 +6,16 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/marked/1.1.0/marked.min.js"></script>  
+    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.6/vue-router.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.6.2/dist/antd.min.js"></script>
+    <!-- 引入css -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.3/styles/monokai-sublime.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.6.2/dist/antd.min.css" rel="stylesheet">
   </head>
   <body>
     <noscript>
diff --git a/blogvue/src/api/api.js b/blogvue/src/api/api.js
@@ -1,6 +1,4 @@
-import axios from 'axios'
-import { message } from 'ant-design-vue'
-
+const message = antd.message
 /**
  * ajax请求通用方法，基于axios
  * @param {String} method  异步请求的方式，如：post、get等
diff --git a/blogvue/src/assets/images/404.png b/blogvue/src/assets/images/404.png
diff --git a/blogvue/src/assets/images/lazyloading.gif b/blogvue/src/assets/images/lazyloading.gif
diff --git a/blogvue/src/components/Advert.vue b/blogvue/src/components/Advert.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="advert-container" v-if="advertList.length > 0">
     <template v-for="(item, index) in advertList">
-      <router-link
+      <a
         class="advert-item"
-        :to="item.imgurl"
+        :href="item.imgurl"
+        target="_blank"
         :key="index">
-        <img :src="item.img" />
-      </router-link>
+        <img v-lazy="item.img" />
+      </a>
     </template>
   </div>
 </template>
@@ -31,8 +32,18 @@
     border-radius: .5rem;
     padding: .25rem .5rem;
     display: block;
+    img[lazy="loading"] {
+      width: 100%;
+    }
+    img[lazy="loaded"] {
+      width: 100%;
+    }
     img {
       width: 100%;
+      padding: .125rem;
+      border: 1px solid #dedede;
+      border-radius: .25rem;
+      margin-top: .25rem;
     }
   }
 }
diff --git a/blogvue/src/components/ArticleItem.vue b/blogvue/src/components/ArticleItem.vue
@@ -37,9 +37,9 @@
 </template>
 
 <script>
-import marked from 'marked'
-import hljs from "highlight.js";
-import 'highlight.js/styles/monokai-sublime.css';
+// import marked from 'marked'
+// import hljs from "highlight.js";
+// import 'highlight.js/styles/monokai-sublime.css';
 import { formatDate } from '../assets/js/tools'
 import Icon from './Icon'
 
@@ -87,8 +87,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @import 'highlight.js/styles/monokai-sublime.css';
-
 .article-item {
   width: 100%;
   background-color: #fff;
diff --git a/blogvue/src/components/ArticleItemDetail.vue b/blogvue/src/components/ArticleItemDetail.vue
@@ -33,9 +33,9 @@
 </template>
 
 <script>
-import marked from 'marked'
-import hljs from 'highlight.js'
-import 'highlight.js/styles/monokai-sublime.css'
+// import marked from 'marked'
+// import hljs from 'highlight.js'
+// import 'highlight.js/styles/monokai-sublime.css'
 import Comment from './Comment'
 import Icon from './Icon'
 import { formatTime } from '../assets/js/tools'
diff --git a/blogvue/src/components/ArticleType.vue b/blogvue/src/components/ArticleType.vue
@@ -59,7 +59,7 @@ export default {
     color: #333333;
     height: 2rem;
     line-height: 2rem;
-    margin: 0 .5rem;
+    margin: .5rem;
     padding: 0rem 1rem;
     background-color: #ffffff;
     border: 1px solid #55b2ff;
diff --git a/blogvue/src/components/Author.vue b/blogvue/src/components/Author.vue
@@ -50,6 +50,8 @@
 
 <script>
 import Icon from '@/components/Icon'
+import lazyLoadingImg from '@/assets/images/lazyloading.gif'
+import lazyLoadErrorImg from '@/assets/images/404.png'
 
 export default {
   components: {
@@ -61,6 +63,17 @@ export default {
       required: true
     },
   },
+  computed: {
+    bgImg: {
+      get: function () {
+        return {
+          src: this.userInfo.bgImg,
+          error: lazyLoadErrorImg,
+          loading: lazyLoadingImg
+        }
+      }
+    }
+  }
 }
 </script>
 
diff --git a/blogvue/src/components/Comment.vue b/blogvue/src/components/Comment.vue
@@ -45,9 +45,9 @@
             :key="index + item.publishTime"
             @click="()=> selectedCommentId = ''">
             <div class="avatar-container">
-              <router-link :to="'http://' + item.site" target="_blank">
+              <a :href="'http://' + item.site" target="_blank">
                 <img :src="item.portrait" />
-              </router-link>
+              </a>
             </div>
             <div class="comment-info">
               <span class="nickname">{{item.nickname}}</span>
@@ -102,17 +102,17 @@
               <template v-for="(subItem, subKey) in item.children">
                 <div class="second-comment-item" :key="subKey">
                   <div class="avatar-container">
-                    <router-link :to="'http://' + subItem.site" target="_blank">
+                    <a :href="'http://' + subItem.site" target="_blank">
                       <img :src="subItem.portrait" />
-                    </router-link>
+                    </a>
                   </div>
                   <div class="comment-info">
                     <span class="nickname">{{subItem.nickname}}</span>
                     <div class="comment-content" >
                       <div>回复
-                        <router-link :to="'http://' + item.site" target="_blank">
+                        <a :href="'http://' + item.site" target="_blank">
                           {{item.nickname}}
-                        </router-link>：
+                        </a>：
                       </div>
                       <div v-html="subItem.comment"></div>
                     </div>
diff --git a/blogvue/src/components/Icon.vue b/blogvue/src/components/Icon.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-  import { Icon } from 'ant-design-vue'
+  const Icon = antd.Icon
   const scriptUrl = '//at.alicdn.com/t/font_1722969_0qfwcko2z4bi.js'
   const IconFont = Icon.createFromIconfontCN({
     scriptUrl: scriptUrl,
diff --git a/blogvue/src/config/apiBaseUrl.js b/blogvue/src/config/apiBaseUrl.js
@@ -1,6 +1,6 @@
 const serverUrl = 'https://immortalboy.cn'
-const baseUrl = 'https://immortalboy.cn/api/blog'
-// const baseUrl = '/api/blog'
+// const baseUrl = 'https://immortalboy.cn/api/blog'
+const baseUrl = '/api/blog'
 
 const servicePath = {
   visitorLogin: baseUrl + '/comment/visitorLogin', // 评论接口：获取文章列表
diff --git a/blogvue/src/main.js b/blogvue/src/main.js
@@ -1,17 +1,28 @@
-import Vue from 'vue'
+// import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import VueMeta from 'vue-meta'
+import VueLazyload from 'vue-lazyload'
 
-import './plugins/antdesignvue'
-import api from './api/api'
+Vue.use(antd)
+Vue.prototype.$message = antd.message
 
+import api from './api/api'
 Vue.prototype.$api = api
 Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
 
+Vue.use(VueLazyload, {
+  preLoad: 1.3,
+  error: require('./assets/images/404.png'),
+  loading: require('./assets/images/lazyloading.gif'),
+  attempt: 1
+})
+
+
+
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/blogvue/src/plugins/antdesignvue.js b/blogvue/src/plugins/antdesignvue.js
@@ -1,3 +1,4 @@
+// 已通过cdn引入，此文件只做示例
 import Vue from 'vue'
 import { Menu, Row, Col, Divider, Popover, Badge, Spin, Pagination, Form,
         FormModel, Input, Button, Avatar, Upload, Modal, Breadcrumb, List, Message } from 'ant-design-vue'
@@ -22,3 +23,4 @@ Vue.use(List)
 
 // 系统方法
 Vue.prototype.$message = Message
+
diff --git a/blogvue/src/router/index.js b/blogvue/src/router/index.js
@@ -1,6 +1,3 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
 Vue.use(VueRouter)
 
 const routes = [
diff --git a/blogvue/src/views/About.vue b/blogvue/src/views/About.vue
@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import marked from 'marked'
-import hljs from 'highlight.js'
-import 'highlight.js/styles/monokai-sublime.css'
+// import marked from 'marked'
+// import hljs from 'highlight.js'
+// import 'highlight.js/styles/monokai-sublime.css'
 import { servicePath } from '../config/apiBaseUrl'
 import Comment from '../components/Comment'
 
diff --git a/blogvue/vue.config.js b/blogvue/vue.config.js
@@ -2,43 +2,73 @@ const path = require('path')
 const BundleAanlyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const CompressionPlugin = require('compression-webpack-plugin');
 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
+const ImageminPlugin = require('imagemin-webpack-plugin').default
 
 module.exports = {
   outputDir: 'vuespa',
-  configureWebpack: {
-    resolve: {
-      alias: {
-        "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/plugins/icons.js")
+  configureWebpack: config => {
+    if (process.env.NODE_ENV === 'production') {
+      return {
+        resolve: {
+          alias: {
+            "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/plugins/icons.js")
+          }
+        },
+        module: {
+          rules: []
+        },
+        plugins: [
+          new BundleAanlyzerPlugin(),
+          new CompressionPlugin({
+            filename: '[path].gz[query]',
+            algorithm: 'gzip',
+            test: productionGzipExtensions,
+            threshold: 10240,
+            minRatio: 0.8,
+            deleteOriginalAssets: true
+          }),
+          new ImageminPlugin({
+            test: /\.(gif|png|jpe?g|svg)$/i,
+            disable: false, // Disable during development
+            pngquant: {
+              quality: '80-90'
+            }
+          })
+        ],
+        externals: {
+          'vue': 'Vue',
+          'axios': 'axios',
+          'marked': 'marked',
+          'vue-router': 'VueRouter',
+          'ant-design-vue': 'antd',
+          'moment': 'moment',
+          'highlight.js': 'hljs'
+        }
       }
-    },
-    module: {
-      rules: [
-        {
-          test: /\.(gif|png|jpe?g|svg)$/i,
-          use: [
-            'file-loader',
-            {
-              loader: 'image-webpack-loader',
-              options: {
-                bypassOnDebug: true, // webpack@1.x
-                disable: true, // webpack@2.x and newer
-              },
-            },
-          ]
+    } else {
+      return {
+        resolve: {
+          alias: {
+            "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/plugins/icons.js")
+          }
+        },
+        module: {
+          rules: []
+        },
+        plugins: [
+          new BundleAanlyzerPlugin()
+        ],
+        externals: {
+          'vue': 'Vue',
+          'axios': 'axios',
+          'marked': 'marked',
+          'vue-router': 'VueRouter',
+          'ant-design-vue': 'antd',
+          'moment': 'moment',
+          'highlight.js': 'hljs'
         }
-      ]
-    },
-    plugins: [
-      new BundleAanlyzerPlugin(),
-      new CompressionPlugin({
-        filename: '[path].gz[query]',
-        algorithm: 'gzip',
-        test: productionGzipExtensions,
-        threshold: 10240,
-        minRatio: 0.8,
-        deleteOriginalAssets: true
-      })
-    ]
+      }
+    }
   },
   productionSourceMap: false, // 关闭生产环境sourcemap
   devServer: {
