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

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:stable": "SERVER_ENV=stable node ./build/index.js",
-    "start:preonline": "npm run copy && npm run build && SERVER_ENV=preonline node ./build/index.js",
+    "start:preonline": "SERVER_ENV=preonline node ./build/index.js",
-    "start:online": "npm run copy && npm run build && SERVER_ENV=online 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"

server/src/apps/surveyPublish/index.ts

@@ -57,7 +57,7 @@ export default class SurveyPublish {
     await surveySubmitService.submit({ surveySubmitData })
     return {
       code: 200,
-      msg: "报名成功",
+      msg: "提交成功",
     }
   }
 }

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",

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({

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',

web/src/management/pages/edit/modules/contentModule/buildData.js

@@ -1,5 +1,4 @@
-import _pick from 'lodash/pick';
+import { pick as _pick, get as _get } from 'lodash';
-import _get from 'lodash/get';
 
 // 生成需要保存到接口的数据
 export default function (schema) {

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 || '未知用户',

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() {

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',

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',

web/src/management/pages/edit/modules/questionModule/components/setterField.vue

@@ -32,9 +32,7 @@
   </el-form>
 </template>
 <script>
-import _get from 'lodash/get';
+import { get as _get, pick as _pick, isFunction as _isFunction } from 'lodash';
-import _pick from 'lodash/pick';
-import _isFunction from 'lodash/isFunction';
 
 import FormItem from '@/materials/setters/widgets/FormItem.vue';
 import setterLoader from '@/materials/setters/setterLoader';

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',

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',

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',

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 { get as _get, pick as _pick } from 'lodash';
-import _pick from 'lodash/set';
 
 const textMap = {
   Success: '提交成功页面配置',

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 { cloneDeep as _cloneDeep, isArray as _isArray,  get as _get } from 'lodash';
-import _isArray from 'lodash/isArray';
-import _get from 'lodash/get';
 
 export default {
   name: 'QuestionConfig',

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) => {
+      const fieldInfo = map(this.fields, (f) => {
-        return _.get(fieldConfig, f, null);
+        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 = [

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',

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';
 

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'),
   },
 ];
 

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 }) {

web/src/management/store/edit/mutations.js

@@ -1,5 +1,4 @@
-import _set from 'lodash/set';
+import { set as _set, merge as _merge } from 'lodash';
-import _merge from 'lodash/merge';
 
 export default {
   setCurrentEditOne(state, data) {

web/src/management/utils/index.js

@@ -1,6 +1,5 @@
 import { defaultQuestionConfig } from '../config/questionConfig';
-import _cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep as _cloneDeep, map as _map } from 'lodash';
-import _map from 'lodash/map';
 
 const generateQuestionField = () => {
   const num = Math.floor(Math.random() * 1000);

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',

web/src/materials/questions/common/utils/index.js

@@ -1,5 +1,4 @@
-import _forEach from 'lodash/forEach';
+import { forEach as _forEach, trim as _trim  } from 'lodash';
-import _trim from 'lodash/trim';
 import { escapeFilterXSS } from '@/common/xss';
 
 // 获取选项的hash

web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue

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

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: {

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 {

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',

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',

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 {

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;

web/src/render/adapter/question.js

@@ -2,8 +2,7 @@
  * 处理单题的配置
  */
 
-import _get from 'lodash/get';
+import { get as _get, map as _map } from 'lodash';
-import _map from 'lodash/map';
 
 // 处理选择题的options
 function handleOptions(item) {

web/src/render/adapter/questionSeq.js

@@ -1,5 +1,4 @@
-import _get from 'lodash/get';
+import { get as _get, last as _last } from 'lodash';
-import _last from 'lodash/last';
 
 export default function handleQuestionSeq(questionConfig) {
   const dataList = _get(questionConfig, 'dataConf.dataList', []);

web/src/render/adapter/rules.js

@@ -1,8 +1,4 @@
-import _forEach from 'lodash/forEach';
+import { forEach as _forEach, get as _get, isArray as _isArray, keys as _keys, set as _set } from 'lodash';
-import _get from 'lodash/get';
-import _isArray from 'lodash/isArray';
-import _keys from 'lodash/keys';
-import _set from 'lodash/set';
 
 const regexpMap = {
   nd: /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/,

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 {

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) {

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';

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,10 +46,16 @@ 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();
@@ -53,18 +63,60 @@ module.exports = defineConfig({
     config.optimization.splitChunks({
       cacheGroups: {
         setterWidgets: {
-          name: 'setterWidgets',
+          name: 'chunk-setterWidgets',
-          test: /\/setters\/src\/widgets[\\/]/,
+          test: /\/materials\/setters[\\/]/,
           chunks: 'async',
           enforce: true,
         },
         materialWidgets: {
-          name: 'materialWidgets',
+          name: 'chunk-materialWidgets',
-          test: /\/materials\/questions\/widgets[\\/]/,
+          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)
   },
 });