feat: 前端工程打包优化 (#14)

2023-12-01 16:13:51 +08:00 · 2023-12-01 16:13:51 +08:00 · 851c89f593
commit 851c89f593
parent 7769bef84b
39 changed files with 129 additions and 73 deletions
--- a/server/package.json
+++ b/server/package.json
@ -8,9 +8,9 @@
    "build": "tsc",
    "launch:local": "npm run build && SERVER_ENV=local node ./build/index.js",
    "launch:dev": "npm run build && SERVER_ENV=dev node ./build/index.js",
-    "start:stable": "npm run copy && npm run build && SERVER_ENV=stable node ./build/index.js",
-    "start:preonline": "npm run copy && npm run build && SERVER_ENV=preonline node ./build/index.js",
-    "start:online": "npm run copy && npm run build && SERVER_ENV=online node ./build/index.js",
+    "start:stable": "SERVER_ENV=stable node ./build/index.js",
+    "start:preonline": "SERVER_ENV=preonline node ./build/index.js",
+    "start:online": "SERVER_ENV=online node ./build/index.js",
    "start": "npm run start:online",
    "local": "npm run copy && nodemon -e js,mjs,json,ts  --exec 'npm run launch:local' --watch ./src",
    "dev": "npm run copy && nodemon -e js,mjs,json,ts  --exec 'npm run launch:dev' --watch ./src"
--- a/server/src/apps/surveyPublish/index.ts
+++ b/server/src/apps/surveyPublish/index.ts
@ -57,7 +57,7 @@ export default class SurveyPublish {
    await surveySubmitService.submit({ surveySubmitData })
    return {
      code: 200,
-      msg: "报名成功",
+      msg: "提交成功",
    }
  }
 }
--- a/web/package.json
+++ b/web/package.json
@ -5,6 +5,7 @@
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
+    "report": "vue-cli-service build --report",
    "lint": "vue-cli-service lint",
    "lintfix": "eslint --fix ."
  },
@ -12,7 +13,6 @@
    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
    "@vue/babel-preset-jsx": "^1.4.0",
    "@wangeditor/editor": "^5.1.23",
-    "@wangeditor/editor-for-vue": "1.0.2",
    "axios": "^1.4.0",
    "clipboard": "^2.0.11",
    "core-js": "^3.8.3",
@ -46,7 +46,8 @@
    "sass-loader": "^12.0.0",
    "style-resources-loader": "^1.5.0",
    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.7.14"
+    "vue-template-compiler": "^2.7.14",
+    "speed-measure-webpack-plugin": "^1.5.0"
  },
  "engines": {
    "node": ">=14.21.0",
--- a/web/src/management/api/base.js
+++ b/web/src/management/api/base.js
@ -1,7 +1,7 @@
 import axios from 'axios';
 import store from '@/management/store/index';
 import router from '@/management/router/index';
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';
 import { Message } from 'element-ui';

 const instance = axios.create({
--- a/web/src/management/pages/edit/components/navbar.vue
+++ b/web/src/management/pages/edit/components/navbar.vue
@ -23,7 +23,7 @@ import history from '../modules/contentModule/history.vue';
 import save from '../modules/contentModule/save.vue';
 import publish from '../modules/contentModule/publish.vue';
 import { mapState } from 'vuex';
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';

 export default {
  name: 'navbar',
--- a/web/src/management/pages/edit/modules/contentModule/buildData.js
+++ b/web/src/management/pages/edit/modules/contentModule/buildData.js
@ -1,5 +1,4 @@
-import _pick from 'lodash/pick';
-import _get from 'lodash/get';
+import { pick as _pick, get as _get } from 'lodash';

 // 生成需要保存到接口的数据
 export default function (schema) {
--- a/web/src/management/pages/edit/modules/contentModule/history.vue
+++ b/web/src/management/pages/edit/modules/contentModule/history.vue
@ -25,8 +25,13 @@
 <script>
 import { getSurveyHistory } from '@/management/api/survey';
 import moment from 'moment';
+// 引入中文
+import 'moment/locale/zh-cn'
+// 设置中文
+moment.locale('zh-cn');
+
 import { mapState } from 'vuex';
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';

 const getItemData = (item) => ({
  operator: item?.operator?.username || '未知用户',
--- a/web/src/management/pages/edit/modules/contentModule/publish.vue
+++ b/web/src/management/pages/edit/modules/contentModule/publish.vue
@ -12,7 +12,7 @@
 import { mapState } from 'vuex';
 import { publishSurvey, saveSurvey } from '@/management/api/survey';
 import buildData from './buildData';
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';
 export default {
  name: 'publish',
  data() {
--- a/web/src/management/pages/edit/modules/contentModule/save.vue
+++ b/web/src/management/pages/edit/modules/contentModule/save.vue
@ -17,7 +17,7 @@
 import { saveSurvey } from '@/management/api/survey';
 import buildData from './buildData';
 import { mapState } from 'vuex';
-import _get from 'lodash/get';
+import { get as _get} from 'lodash';

 export default {
  name: 'save',
--- a/web/src/management/pages/edit/modules/questionModule/components/banner.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/banner.vue
@ -22,7 +22,7 @@
  </div>
 </template>
 <script>
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';

 export default {
  name: 'banner',
--- a/web/src/management/pages/edit/modules/questionModule/components/setterField.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/setterField.vue
@ -32,9 +32,7 @@
  </el-form>
 </template>
 <script>
-import _get from 'lodash/get';
-import _pick from 'lodash/pick';
-import _isFunction from 'lodash/isFunction';
+import { get as _get, pick as _pick, isFunction as _isFunction } from 'lodash';

 import FormItem from '@/materials/setters/widgets/FormItem.vue';
 import setterLoader from '@/materials/setters/setterLoader';
--- a/web/src/management/pages/edit/modules/questionModule/components/typeList.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/typeList.vue
@ -46,7 +46,7 @@ import questionMenuConfig, {
 } from '@/management/config/questionMenuConfig';
 import { getQuestionByType } from '@/management/utils/index';
 import { mapState, mapActions } from 'vuex';
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';

 export default {
  name: 'QuestionTypeList',
--- a/web/src/management/pages/edit/modules/questionModule/previewPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/previewPanel.vue
@ -39,14 +39,13 @@
 </template>

 <script>
-// import _cloneDeep from 'lodash/cloneDeep'
 import materialGroup from './components/materialGroup.vue';
 import banner from './components/banner.vue';
 import mainTitle from './components/mainTitle.vue';
 import submit from './components/submit.vue';
 import logo from './components/logo.vue';
 import { mapState, mapGetters } from 'vuex';
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';

 export default {
  name: 'mainOperation',
--- a/web/src/management/pages/edit/modules/settingModule/resultPreview.vue
+++ b/web/src/management/pages/edit/modules/settingModule/resultPreview.vue
@ -14,7 +14,7 @@ import { mapState } from 'vuex';
 import success from './components/success';
 import overTime from './components/overTime';
 import { EDIT_STATUS_MAP } from './enum';
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';

 export default {
  name: 'ResultConfigPreivew',
--- a/web/src/management/pages/edit/modules/settingModule/resultSetter.vue
+++ b/web/src/management/pages/edit/modules/settingModule/resultSetter.vue
@ -28,8 +28,7 @@ import FormItem from '@/materials/setters/widgets/FormItem.vue';
 import setterLoader from '@/materials/setters/setterLoader';
 import statusConfig from './config/statusConfig';
 import { mapState } from 'vuex';
-import _get from 'lodash/get';
-import _pick from 'lodash/set';
+import { get as _get, pick as _pick } from 'lodash';

 const textMap = {
  Success: '提交成功页面配置',
--- a/web/src/management/pages/edit/modules/settingModule/setting.vue
+++ b/web/src/management/pages/edit/modules/settingModule/setting.vue
@ -44,9 +44,7 @@ import baseConfig from './config/baseConfig';
 import baseFormConfig from './config/baseFormConfig';
 import FormItem from '@/materials/setters/widgets/FormItem.vue';
 import setterLoader from '@/materials/setters/setterLoader';
-import _cloneDeep from 'lodash/cloneDeep';
-import _isArray from 'lodash/isArray';
-import _get from 'lodash/get';
+import { cloneDeep as _cloneDeep, isArray as _isArray,  get as _get } from 'lodash';

 export default {
  name: 'QuestionConfig',
--- a/web/src/management/pages/list/components/baseList.vue
+++ b/web/src/management/pages/list/components/baseList.vue
@ -71,8 +71,12 @@
 </template>

 <script>
-import _ from 'lodash';
+import { get, map } from 'lodash';
 import moment from 'moment';
+// 引入中文
+import 'moment/locale/zh-cn'
+// 设置中文
+moment.locale('zh-cn');
 import empty from '@/management/components/empty';
 import ModifyDialog from './modify';
 import Tag from './tag';
@ -99,8 +103,8 @@ export default {
  },
  computed: {
    fieldList() {
-      const fieldInfo = _.map(this.fields, (f) => {
-        return _.get(fieldConfig, f, null);
+      const fieldInfo = map(this.fields, (f) => {
+        return get(fieldConfig, f, null);
      });
      return fieldInfo;
    },
@ -132,14 +136,14 @@ export default {
      }
    },
    lget(row, field) {
-      const data = _.get(row, field.key);
+      const data = get(row, field.key);
      if (field.key === 'updateDate') {
        return moment(data).format('YYYY-MM-DD HH:mm:ss');
      }
      return data;
    },
    getStatus(data) {
-      return _.get(data, 'curStatus.id', 'new');
+      return get(data, 'curStatus.id', 'new');
    },
    getToolConfig() {
      const funcList = [
--- a/web/src/management/pages/list/components/modify.vue
+++ b/web/src/management/pages/list/components/modify.vue
@ -34,7 +34,7 @@
 <script>
 import { CODE_MAP } from '@/management/api/base';
 import { updateSurvey } from '@/management/api/survey';
-import _pick from 'lodash/pick';
+import { pick as _pick } from 'lodash';

 export default {
  name: 'modifyDialog',
--- a/web/src/management/pages/publishResult/index.vue
+++ b/web/src/management/pages/publishResult/index.vue
@ -30,7 +30,7 @@
 <script>
 import ChannelRow from './components/channelRow';
 import empty from '@/management/components/empty';
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';
 import leftMenu from '@/management/components/leftMenu.vue';
 import { mapState } from 'vuex';

--- a/web/src/management/router/index.js
+++ b/web/src/management/router/index.js
@ -11,7 +11,7 @@ const routes = [
  {
    path: '/survey',
    name: 'survey',
-    component: () => import('../pages/list/index.vue'),
+    component: () => import(/* webpackChunkName: "survey" */'../pages/list/index.vue'),
    meta: {
      needLogin: true,
      title: '问卷列表',
@ -23,7 +23,7 @@ const routes = [
    meta: {
      needLogin: true,
    },
-    component: () => import('../pages/edit/index.vue'),
+    component: () => import(/* webpackChunkName: "editPage" */'../pages/edit/index.vue'),
    children: [
      {
        path: '',
@ -31,7 +31,7 @@ const routes = [
        meta: {
          needLogin: true,
        },
-        component: () => import('../pages/edit/pages/edit.vue'),
+        component: () => import(/* webpackChunkName: "QuestionEditIndex" */'../pages/edit/pages/edit.vue'),
      },
      {
        path: 'setting',
@ -39,7 +39,7 @@ const routes = [
        meta: {
          needLogin: true,
        },
-        component: () => import('../pages/edit/pages/setting.vue'),
+        component: () => import(/* webpackChunkName: "QuestionEditSetting" */'../pages/edit/pages/setting.vue'),
      },
      {
        path: 'resultConfig',
@ -47,7 +47,7 @@ const routes = [
        meta: {
          needLogin: true,
        },
-        component: () => import('../pages/edit/pages/resultConfig.vue'),
+        component: () => import(/* webpackChunkName: "QuestionEditResultConfig" */'../pages/edit/pages/resultConfig.vue'),
      },
    ],
  },
@ -57,7 +57,7 @@ const routes = [
    meta: {
      needLogin: true,
    },
-    component: () => import('../pages/analysis/index.vue'),
+    component: () => import(/* webpackChunkName: "analysisPage" */'../pages/analysis/index.vue'),
  },
  {
    path: '/survey/:id/publishResult',
@ -65,7 +65,7 @@ const routes = [
    meta: {
      needLogin: true,
    },
-    component: () => import('../pages/publishResult/index.vue'),
+    component: () => import(/* webpackChunkName: "publishResultPage" */'../pages/publishResult/index.vue'),
  },
  {
    path: '/create',
@ -74,13 +74,13 @@ const routes = [
      needLogin: true,
      title: '创建问卷',
    },
-    component: () => import('../pages/create/index.vue'),
+    component: () => import(/* webpackChunkName: "create" */'../pages/create/index.vue'),
  },
  {
    path: '/login',
    name: 'login',
    title: '登陆',
-    component: () => import('../pages/login/index.vue'),
+    component: () => import(/* webpackChunkName: "login" */'../pages/login/index.vue'),
  },
 ];

--- a/web/src/management/store/edit/actions.js
+++ b/web/src/management/store/edit/actions.js
@ -1,7 +1,6 @@
 import { getNewField } from '@/management/utils';
-import _cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep as _cloneDeep, get as _get } from 'lodash';
 import { getSurveyById } from '@/management/api/survey';
-import _get from 'lodash/get';

 export default {
  init({ state, dispatch }) {
--- a/web/src/management/store/edit/mutations.js
+++ b/web/src/management/store/edit/mutations.js
@ -1,5 +1,4 @@
-import _set from 'lodash/set';
-import _merge from 'lodash/merge';
+import { set as _set, merge as _merge } from 'lodash';

 export default {
  setCurrentEditOne(state, data) {
--- a/web/src/management/utils/index.js
+++ b/web/src/management/utils/index.js
@ -1,6 +1,5 @@
 import { defaultQuestionConfig } from '../config/questionConfig';
-import _cloneDeep from 'lodash/cloneDeep';
-import _map from 'lodash/map';
+import { cloneDeep as _cloneDeep, map as _map } from 'lodash';

 const generateQuestionField = () => {
  const num = Math.floor(Math.random() * 1000);
--- a/web/src/materials/questions/common/config/basicConfig.js
+++ b/web/src/materials/questions/common/config/basicConfig.js
@ -1,4 +1,4 @@
-import _pick from 'lodash/pick';
+import { pick as _pick } from 'lodash';

 export default {
  name: 'basicConfig',
--- a/web/src/materials/questions/common/utils/index.js
+++ b/web/src/materials/questions/common/utils/index.js
@ -1,5 +1,4 @@
-import _forEach from 'lodash/forEach';
-import _trim from 'lodash/trim';
+import { forEach as _forEach, trim as _trim  } from 'lodash';
 import { escapeFilterXSS } from '@/common/xss';

 // 获取选项的hash
--- a/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
+++ b/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
@ -87,8 +87,7 @@

 <script>
 import draggable from 'vuedraggable';
-import _forEach from 'lodash/forEach';
-import _cloneDeep from 'lodash/cloneDeep';
+import { forEach as _forEach, cloneDeep as _cloneDeep } from 'lodash';
 import ExtraIcon from '../ExtraIcon';
 import { cleanRichText } from '@/common/xss';

--- a/web/src/materials/questions/components/AdvancedConfig/RateConfig.vue
+++ b/web/src/materials/questions/components/AdvancedConfig/RateConfig.vue
@ -48,7 +48,7 @@
  </el-dialog>
 </template>
 <script>
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';
 import { mapGetters } from 'vuex';
 export default {
  props: {
--- a/web/src/materials/questions/components/Options/OptionEdit.vue
+++ b/web/src/materials/questions/components/Options/OptionEdit.vue
@ -43,7 +43,7 @@
 <script>
 import draggable from 'vuedraggable';
 import { mapGetters } from 'vuex';
-import _cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep as _cloneDeep } from 'lodash';
 import EditorV2 from '@/common/Editor/EditorV2';

 export default {
--- a/web/src/materials/setters/widgets/FreqAndNumberLimit.vue
+++ b/web/src/materials/setters/widgets/FreqAndNumberLimit.vue
@ -24,7 +24,7 @@
  </el-form-item>
 </template>
 <script>
-import _get from 'lodash/get';
+import { get as _get } from 'lodash';
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
 export default {
  name: 'FreqAndNumberLimit',
--- a/web/src/materials/setters/widgets/QuestionTime.vue
+++ b/web/src/materials/setters/widgets/QuestionTime.vue
@ -22,6 +22,10 @@
 <script>
 // 要注意，element的format和moment的format的D是不同的
 import moment from 'moment';
+// 引入中文
+import 'moment/locale/zh-cn'
+// 设置中文
+moment.locale('zh-cn');
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
 export default {
  name: 'QuestionTime',
--- a/web/src/materials/setters/widgets/QuestionTimeHour.vue
+++ b/web/src/materials/setters/widgets/QuestionTimeHour.vue
@ -14,6 +14,10 @@
 </template>
 <script>
 import moment from 'moment';
+// 引入中文
+import 'moment/locale/zh-cn'
+// 设置中文
+moment.locale('zh-cn');
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';

 export default {
--- a/web/src/materials/utils/componentLoader.js
+++ b/web/src/materials/utils/componentLoader.js
@ -1,4 +1,4 @@
-import _cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep as _cloneDeep } from 'lodash';
 export default class ComponentLoader {
  constructor(options = {}) {
    const { componentList, lifeCycle } = options;
--- a/web/src/render/adapter/question.js
+++ b/web/src/render/adapter/question.js
@ -2,8 +2,7 @@
 * 处理单题的配置
 */

-import _get from 'lodash/get';
-import _map from 'lodash/map';
+import { get as _get, map as _map } from 'lodash';

 // 处理选择题的options
 function handleOptions(item) {
--- a/web/src/render/adapter/questionSeq.js
+++ b/web/src/render/adapter/questionSeq.js
@ -1,5 +1,4 @@
-import _get from 'lodash/get';
-import _last from 'lodash/last';
+import { get as _get, last as _last } from 'lodash';

 export default function handleQuestionSeq(questionConfig) {
  const dataList = _get(questionConfig, 'dataConf.dataList', []);
--- a/web/src/render/adapter/rules.js
+++ b/web/src/render/adapter/rules.js
@ -1,8 +1,4 @@
-import _forEach from 'lodash/forEach';
-import _get from 'lodash/get';
-import _isArray from 'lodash/isArray';
-import _keys from 'lodash/keys';
-import _set from 'lodash/set';
+import { forEach as _forEach, get as _get, isArray as _isArray, keys as _keys, set as _set } from 'lodash';

 const regexpMap = {
  nd: /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/,
--- a/web/src/render/components/header.vue
+++ b/web/src/render/components/header.vue
@ -45,7 +45,7 @@
  </div>
 </template>
 <script>
-import _get from 'lodash/get';
+import { get  as _get} from 'lodash';
 import { formatLink } from '../utils/index.js';

 export default {
--- a/web/src/render/plugins/dialog/index.js
+++ b/web/src/render/plugins/dialog/index.js
@ -1,7 +1,7 @@
 import confirm from '../../components/confirm.vue';
 import alert from '../../components/alert.vue';

-import _isFunction from 'lodash/isFunction';
+import { isFunction  as _isFunction} from 'lodash';

 export default {
  install(Vue) {
--- a/web/src/render/store/actions.js
+++ b/web/src/render/store/actions.js
@ -1,4 +1,8 @@
 import moment from 'moment';
+// 引入中文
+import 'moment/locale/zh-cn'
+// 设置中文
+moment.locale('zh-cn');
 import adapter from '../adapter';
 import { queryVote, getEncryptInfo } from '@/render/api/survey';
 import { CODE_MAP } from '@/management/api/base';
--- a/web/vue.config.js
+++ b/web/vue.config.js
@ -1,4 +1,8 @@
 const { defineConfig } = require('@vue/cli-service');
+const Webpack = require('webpack')
+// 分析打包时间
+const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin')
+

 module.exports = defineConfig({
  transpileDependencies: true,
@ -42,29 +46,77 @@ module.exports = defineConfig({
    },
    open: true,
  },
+  configureWebpack: {
+    plugins: [new Webpack.IgnorePlugin({resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ })],
+  },
  chainWebpack: (config) => {
    config.module
      .rule('js')
      .test(/\.jsx?$/)
+      .exclude
+        .add(/node_modules/)
+        .end()
      .use('babel-loader')
      .loader('babel-loader')
      .end();
-
+    
    config.optimization.splitChunks({
      cacheGroups: {
        setterWidgets: {
-          name: 'setterWidgets',
-          test: /\/setters\/src\/widgets[\\/]/,
+          name: 'chunk-setterWidgets',
+          test: /\/materials\/setters[\\/]/,
          chunks: 'async',
          enforce: true,
        },
        materialWidgets: {
-          name: 'materialWidgets',
-          test: /\/materials\/questions\/widgets[\\/]/,
+          name: 'chunk-materialWidgets',
+          test: /\/materials\/questions[\\/]/,
          chunks: 'async',
          enforce: true,
        },
+        commonEditor: {
+          name: 'chunk-commonEditor',
+          test: /\/common\/Editor[\\/]/,
+          enforce: true,
+        },
+        element: {
+          name: 'chunk-element-ui',
+          test: /[\\/]node_modules[\\/]element-ui[\\/]/,
+          chunks: "all",
+          priority: 3,
+          reuseExistingChunk: true,
+          enforce: true
+        },
+        moment: {
+          name: 'chunk-moment',
+          test: /[\\/]node_modules[\\/]moment[\\/]/,
+          chunks: "all",
+          priority: 3,
+          reuseExistingChunk: true,
+          enforce: true
+        },
+        '@wangeditor': {
+          name: 'chunk-wangeditor',
+          test: /[\\/]node_modules[\\/]@wangeditor[\\/]/,
+          chunks: "all",
+          priority: 3,
+          reuseExistingChunk: true,
+          enforce: true
+        },
+        common: {
+          //抽取所有入口页面都需要的公共chunk
+          name: "chunk-common",
+          chunks: "initial",
+          minChunks: 2,
+          maxInitialRequests: 5,
+          minSize: 0,
+          priority: 1,
+          reuseExistingChunk: true,
+          enforce: true
+        }
      },
    });
+    config.plugin('speed')
+      .use(SpeedMeasureWebpackPlugin)
  },
 });