chore: 减小包体大小

package.json

@@ -4,24 +4,25 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --modern",
+    "analyze": "vue-cli-service build --modern --report",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.2.0",
     "@vue/cli-plugin-pwa": "^4.5.19",
     "axios": "^0.19.2",
     "core-js": "^3.34.0",
+    "dayjs": "^1.11.10",
     "file-saver": "^2.0.2",
     "gif.js": "^0.2.0",
     "gifshot": "^0.4.5",
     "gsap": "^3.12.4",
     "js-base64": "^2.5.2",
     "jszip": "^3.4.0",
     "localforage": "^1.10.0",
-    "lodash": "^4.17.15",
+    "lodash-es": "^4.17.21",
     "mobile-device-detect": "^0.4.3",
-    "moment": "^2.24.0",
     "opencc-js": "^1.0.5",
     "register-service-worker": "^1.7.2",
     "swiper": "^5.3.6",
@@ -30,7 +31,6 @@
     "vue": "^2.7.15",
     "vue-awesome-swiper": "^4.1.0",
     "vue-concise-slider": "^3.4.4",
-    "vue-moment": "^4.1.0",
     "vue-router": "^3.6.5",
     "vue-waterfall2": "1.10.6",
     "vuex": "^3.6.2",

src/api/index.js

@@ -1,6 +1,6 @@
 import { get } from './http'
 import { DBStorage, Expires } from '@/utils/storage'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import { Base64 } from 'js-base64';
 
 const isSupportWebP = (() => {
@@ -241,8 +241,8 @@ const api = {
    * @param {Number} page 页数 
    * @param {String} date YYYY-MM-DD 默认为「前天」
    */
-  async getRankList(mode = 'weekly', page = 1, date = moment().subtract(2, 'days').format('YYYY-MM-DD')) {
-    date = moment(date).format('YYYY-MM-DD')
+  async getRankList(mode = 'weekly', page = 1, date = dayjs().subtract(2, 'days').format('YYYY-MM-DD')) {
+    date = dayjs(date).format('YYYY-MM-DD')
 
     const cache_key = `rankList_${mode}_${date}_${page}`
     let rankList = await DBStorage.get(cache_key)

src/components/dayjs.js

@@ -0,0 +1,14 @@
+import dayjs from 'dayjs'
+const customParseFormat = require('dayjs/plugin/customParseFormat')
+dayjs.extend(customParseFormat)
+
+export default {
+  install(Vue) {
+    Vue.dayjs = dayjs
+    Vue.prototype.$dayjs = dayjs
+
+    Vue.filter('dayjs', function (value, format = 'YYYY-MM-DD HH:mm:ss') {
+      return dayjs(value).format(format)
+    })
+  }
+}

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import Moment from 'vue-moment'
+import Dayjs from '@/components/dayjs'
 import Icon from 'vue-svg-icon/Icon.vue'
 import { Toast, Lazyload, ImagePreview } from 'vant';
 import '@vant/touch-emulator';
@@ -20,7 +20,7 @@ import './polyfill'
 
 import './registerServiceWorker'
 
-Vue.use(Moment);
+Vue.use(Dayjs);
 Vue.use(Toast);
 Vue.use(Lazyload, {
   lazyComponent: true,

src/views/Artwork/components/Meta.vue

@@ -27,7 +27,7 @@
     </div>
     <div class="date">
       <span class="created">{{
-        artwork.created | moment("YYYY-MM-DD hh:mm")
+        artwork.created | dayjs("YYYY-MM-DD hh:mm")
       }}</span>
       <span class="view">
         <Icon name="view" class="icon"></Icon>

src/views/Artwork/components/Related.vue

@@ -15,12 +15,7 @@
       @load="getRelated()"
     >
       <div class="card-box__wrapper" ref="cardBox">
-        <waterfall
-          :col="col"
-          :width="itemWidth"
-          :gutterWidth="0"
-          :data="artList"
-        >
+        <waterfall :col="col" :width="itemWidth" :gutterWidth="0" :data="artList">
           <router-link
             :to="{
               name: 'Artwork',
@@ -41,7 +36,7 @@
 import { Cell, Swipe, SwipeItem, Icon, List, PullRefresh } from "vant";
 import ImageCard from "@/components/ImageCard";
 import api from "@/api";
-import _ from "lodash";
+import { throttle, uniqBy } from "lodash-es";
 export default {
   name: "Related",
   props: {
@@ -69,7 +64,7 @@ export default {
       this.curPage = 1;
       this.artList = [];
     },
-    getRelated: _.throttle(async function () {
+    getRelated: throttle(async function () {
       if (!this.artwork.id) return;
       let newList;
       let res = await api.getRelated(this.artwork.id, this.curPage);
@@ -78,7 +73,7 @@ export default {
         let artList = JSON.parse(JSON.stringify(this.artList));
 
         artList = artList.concat(newList);
-        artList = _.uniqBy(artList, "id");
+        artList = uniqBy(artList, "id");
 
         this.artList = artList;
         this.loading = false;

src/views/Home/components/Daily.vue

@@ -42,7 +42,7 @@
 import { Cell, Swipe, SwipeItem, Icon, List, PullRefresh } from "vant";
 import ImageCard from "@/components/ImageCard";
 import api from "@/api";
-import _ from "lodash";
+import { throttle, uniqBy } from "lodash-es";
 export default {
   name: "Daily",
   data() {
@@ -60,14 +60,14 @@ export default {
     url(id, index) {
       return api.url(id, index);
     },
-    getRankList: _.throttle(async function () {
+    getRankList: throttle(async function () {
       let res = await api.getRankList("day", this.curPage);
       if (res.status === 0) {
         let newList = res.data;
         let artList = JSON.parse(JSON.stringify(this.artList));
 
         artList.push(...newList);
-        artList = _.uniqBy(artList, "id");
+        artList = uniqBy(artList, "id");
 
         this.artList = artList;
         this.loading = false;

src/views/Home/components/Moments.vue

@@ -7,19 +7,9 @@
       </template>
     </van-cell>
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-      <van-list
-        v-model="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="getLatest"
-      >
+      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getLatest">
         <div class="card-box__wrapper" ref="cardBox">
-          <waterfall
-            :col="col"
-            :width="itemWidth"
-            :gutterWidth="0"
-            :data="artList"
-          >
+          <waterfall :col="col" :width="itemWidth" :gutterWidth="0" :data="artList">
             <router-link
               :to="{
                 name: 'Artwork',
@@ -41,7 +31,7 @@
 import { Cell, Swipe, SwipeItem, Icon, List, PullRefresh } from "vant";
 import ImageCard from "@/components/ImageCard";
 import api from "@/api";
-import _ from "lodash";
+import { throttle, uniqBy } from "lodash-es";
 export default {
   name: "Moments",
   data() {
@@ -70,15 +60,15 @@ export default {
       }
       this.isLoading = false;
     },
-    getLatest: _.throttle(async function () {
+    getLatest: throttle(async function () {
       let newList;
       let res = await api.getLatest();
       if (res.status === 0) {
         newList = res.data;
         let artList = JSON.parse(JSON.stringify(this.artList));
 
         artList.push(...newList);
-        artList = _.uniqBy(artList, "id");
+        artList = uniqBy(artList, "id");
 
         this.artList = artList;
         this.loading = false;

src/views/Novel/components/novel-reader.vue

@@ -130,11 +130,11 @@
 
 <script>
 import { Slider } from "vant";
-import { debounce } from "lodash";
+import { debounce } from "lodash-es";
 import gsap from "gsap";
-import * as OpenCC from "opencc-js";
 import { LocalStorage } from "@/utils/storage";
 import { setThemeColor } from "@/utils";
+const loadOpenCC = () => import("opencc-js");
 
 const _READER_SETTING_KEY = "__PIXIV_readerSetting";
 
@@ -148,16 +148,29 @@ let readerSetting = LocalStorage.get(_READER_SETTING_KEY, {
   zhTrans: 0,
 });
 
-const converter = {
-  s2t: new OpenCC.Converter({
-    from: "cn",
-    to: "tw",
-  }),
-  t2s: new OpenCC.Converter({
-    from: "tw",
-    to: "cn",
-  }),
-};
+class Converter {
+  constructor() {
+    this.inited = false;
+  }
+
+  async init() {
+    const OpenCC = await loadOpenCC();
+
+    this.s2t = new OpenCC.Converter({
+      from: "cn",
+      to: "tw",
+    });
+
+    this.t2s = new OpenCC.Converter({
+      from: "tw",
+      to: "cn",
+    });
+
+    this.inited = true;
+  }
+}
+
+const converter = new Converter();
 
 export default {
   name: "novel-reader",
@@ -309,13 +322,16 @@ export default {
       }
       setThemeColor(this.viewerStyle.backgroundColor);
     },
-    parseNovel() {
+    async parseNovel() {
       if (!this.content) return;
 
       let content = this.content;
       // content = "载".repeat(10000);
 
       const _now = Date.now();
+      if (!converter.inited && this.readerConfig.zhTrans.value > 0) {
+        await converter.init();
+      }
       switch (this.readerConfig.zhTrans.value) {
         case 1: {
           content = converter.t2s(content);

src/views/Rank/index.vue

@@ -66,12 +66,12 @@
 </template>
 
 <script>
-import moment from "moment";
+import dayjs from "dayjs";
 import { List, Loading, Empty } from "vant";
 import ImageCard from "@/components/ImageCard";
 import Nav from "./components/Nav";
 import Top3 from "./components/Top3";
-import _ from "lodash";
+import { throttle, uniqBy } from "lodash-es";
 import api from "@/api";
 export default {
   name: "Rank",
@@ -89,9 +89,9 @@ export default {
       col: 2,
       itemWidth: 0,
       scrollTop: 0,
-      minDate: moment("2007-09-13").toDate(),
-      maxDate: moment().subtract(2, "days").toDate(),
-      date: moment().subtract(2, "days").toDate(),
+      minDate: dayjs("2007-09-13").toDate(),
+      maxDate: dayjs().subtract(2, "days").toDate(),
+      date: dayjs().subtract(2, "days").toDate(),
       isDatePickerShow: false,
       curType: "daily",
       curPage: 1,
@@ -116,7 +116,7 @@ export default {
   },
   computed: {
     dateNum() {
-      return moment(this.date).date();
+      return dayjs(this.date).date();
     },
   },
   watch: {
@@ -149,15 +149,15 @@ export default {
     getIOType(type) {
       return this.menu[type] ? this.menu[type].io : null;
     },
-    getRankList: _.throttle(async function () {
+    getRankList: throttle(async function () {
       let type = this.getIOType(this.curType);
       let res = await api.getRankList(type, this.curPage, this.date);
       if (res.status === 0) {
         let newList = res.data;
         let artList = JSON.parse(JSON.stringify(this.artList));
 
         artList.push(...newList);
-        artList = _.uniqBy(artList, "id");
+        artList = uniqBy(artList, "id");
 
         this.artList = artList;
         this.loading = false;

src/views/Search/components/ImageSearch.vue

@@ -40,7 +40,7 @@
 
 <script>
 import { Uploader } from "vant";
-import _ from "lodash";
+import { throttle, uniqBy } from "lodash-es";
 export default {
   computed: {
     resultList() {
@@ -56,8 +56,8 @@ export default {
         };
       });
 
-      list = _.uniqBy(list, "id");
-      list = _.orderBy(list, "similarity", "desc");
+      list = uniqBy(list, "id");
+      list = orderBy(list, "similarity", "desc");
 
       return list;
     }

src/views/Search/index.vue

@@ -130,7 +130,7 @@ import NovelCard from "@/components/NovelCard";
 import Tags from "./components/Tags";
 import ImageSearch from "./components/ImageSearch";
 import { mapState, mapActions } from "vuex";
-import _ from "lodash";
+import { throttle, uniqBy } from "lodash-es";
 import api from "@/api";
 export default {
   beforeRouteEnter(to, from, next) {
@@ -236,7 +236,7 @@ export default {
       this.resize();
       this.search(this.keywords);
     },
-    search: _.throttle(async function (val) {
+    search: throttle(async function (val) {
       val = val || this.keywords;
       this.keywords__ = val;
       val = val.trim();
@@ -255,7 +255,7 @@ export default {
         let artList = JSON.parse(JSON.stringify(this.artList));
 
         artList.push(...newList);
-        artList = _.uniqBy(artList, "id");
+        artList = uniqBy(artList, "id");
 
         this.artList = artList;
         this.loading = false;