👌 性能优化

package.json

@@ -24,10 +24,13 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-plugin-import": "^1.13.1",
+    "compression-webpack-plugin": "^6.1.1",
     "less": "^3.12.2",
     "less-loader": "^7.0.2",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "typescript": "~3.9.3"
+    "typescript": "~3.9.3",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack-aliyun-oss-plugin": "^2.1.0"
   }
 }

prod.config.js

@@ -1,10 +1,19 @@
+const isProd = process.env.NODE_ENV === "production";
+
 // * 避免打包项
-const externals = {
-  vue: "Vue",
-  vuex: "Vuex",
-  "vue-router": "VueRouter",
-  axios: "axios",
-};
+const externals = isProd
+  ? {
+      vue: "Vue",
+      vuex: "Vuex",
+      "vue-router": "VueRouter",
+      axios: "axios",
+    }
+  : {};
+
+// * 资源地址
+const assetsDir = isProd
+  ? "static" + new Date().toLocaleDateString().replace(/\//g, "-")
+  : "static";
 
 // * 公共代码抽离
 const optimization = {
@@ -130,4 +139,5 @@ module.exports = {
   optimization,
   cdns,
   ossCDN,
+  assetsDir,
 };

src/App.vue

@@ -1,18 +1,17 @@
 <template>
-  <a-config-provider :locale="locale">
-    <router-view />
-  </a-config-provider>
+  <!-- <a-config-provider :locale="locale">
+  </a-config-provider> -->
+  <router-view />
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
+// import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
 
 const App = defineComponent({
   setup() {
-    const locale = ref(zhCN);
-
-    return { locale };
+    // const locale = ref(zhCN);
+    // return { locale };
   },
 });
 

src/main.ts

@@ -1,3 +1,4 @@
+import "moment/locale/zh-cn";
 import "@/scss/index.scss";
 import "@/router/permission";
 

src/views/put/put-book.tsx

@@ -47,25 +47,23 @@ const PutBooks = defineComponent({
       );
     };
 
-    return () => {
-      return (
-        <div class="page-wrap page-wrap-put-books">
-          <tool-bar
-            text={["official_name", "book_name"]}
-            label={["公众号名称", "书名"]}
-            v-model={[state.inSearching, "loading"]}
-            onConfirm={onSearch}
-          />
-          <a-table
-            row-key="id"
-            pagination={tablePageOptions}
-            loading={loading.value}
-            columns={state.columns}
-            data-source={state.list}
-          ></a-table>
-        </div>
-      );
-    };
+    return () => (
+      <div class="page-wrap page-wrap-put-books">
+        <tool-bar
+          text={["official_name", "book_name"]}
+          label={["公众号名称", "书名"]}
+          v-model={[state.inSearching, "loading"]}
+          onConfirm={onSearch}
+        />
+        <a-table
+          row-key="id"
+          pagination={tablePageOptions}
+          loading={loading.value}
+          columns={state.columns}
+          data-source={state.list}
+        ></a-table>
+      </div>
+    );
   },
 });
 

vue.config.js

@@ -1,9 +1,9 @@
+const webpack = require("webpack");
+const prodConfig = require("./prod.config");
+
 module.exports = {
   publicPath: process.env.VUE_APP_PUB_URL,
-  assetsDir:
-    process.env.NODE_ENV === "production"
-      ? "static" + new Date().toLocaleDateString().replace(/\//g, "-")
-      : "static",
+  assetsDir: prodConfig.assetsDir,
   productionSourceMap: false,
   devServer: {
     // * 接口跨域处理
@@ -33,9 +33,16 @@ module.exports = {
     },
   },
   configureWebpack: {
+    devtool: "source-map",
+    externals: prodConfig.externals,
+    optimization: prodConfig.optimization,
+    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
     resolve: {
       extensions: [".js", ".vue", ".json", ".ts"],
     },
+    performance: {
+      hints: false,
+    },
   },
   chainWebpack: (config) => {
     // * 移除prefetch和preload