瀏覽代碼

fix: webpack optimize

furffico 1 年之前
父節點
當前提交
9da2707a09
共有 9 個文件被更改,包括 229 次插入123 次删除
  1. 4 2
      package.json
  2. 86 0
      pnpm-lock.yaml
  3. 47 47
      src/element-ui.ts
  4. 0 4
      src/main.ts
  5. 49 41
      src/views/common/404.vue
  6. 1 8
      src/views/common/home.vue
  7. 4 1
      src/views/common/login.vue
  8. 7 0
      src/views/main.vue
  9. 31 20
      vue.config.js

+ 4 - 2
package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
     "lint": "eslint --ext .js,.vue src",
-    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve"
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
+    "analyze": "NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production ANALYZER=true vue-cli-service build"
   },
   "dependencies": {
     "@smallwei/avue": "2.8.27",
@@ -53,7 +54,8 @@
     "script-ext-html-webpack-plugin": "^2.1.3",
     "typescript": "~4.5.5",
     "vue-loader": "^15.10.0",
-    "vue-template-compiler": "2.7.14"
+    "vue-template-compiler": "2.7.14",
+    "webpack-bundle-analyzer": "^4.9.0"
   },
   "browserslist": [
     "> 1%",

+ 86 - 0
pnpm-lock.yaml

@@ -135,6 +135,9 @@ devDependencies:
   vue-template-compiler:
     specifier: 2.7.14
     version: registry.npmmirror.com/vue-template-compiler@2.7.14
+  webpack-bundle-analyzer:
+    specifier: ^4.9.0
+    version: registry.npmmirror.com/webpack-bundle-analyzer@4.9.0
 
 packages:
 
@@ -1724,6 +1727,13 @@ packages:
       minimist: registry.npmmirror.com/minimist@1.2.8
     dev: true
 
+  registry.npmmirror.com/@discoveryjs/json-ext@0.5.7:
+    resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz}
+    name: '@discoveryjs/json-ext'
+    version: 0.5.7
+    engines: {node: '>=10.0.0'}
+    dev: true
+
   registry.npmmirror.com/@hapi/address@2.1.4:
     resolution: {integrity: sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@hapi/address/-/address-2.1.4.tgz}
     name: '@hapi/address'
@@ -2045,6 +2055,12 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  registry.npmmirror.com/@polka/url@1.0.0-next.21:
+    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz}
+    name: '@polka/url'
+    version: 1.0.0-next.21
+    dev: true
+
   registry.npmmirror.com/@smallwei/avue@2.8.27:
     resolution: {integrity: sha512-qRENOs91FIJ6nUdaAoKUt9rDr7DabvRsk5vMF/ZtmvBcw3x8xeR5LVhpnpTdSTkOGI5nfHKT0AT8fLrL9DMQ8w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@smallwei/avue/-/avue-2.8.27.tgz}
     name: '@smallwei/avue'
@@ -3248,6 +3264,13 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  registry.npmmirror.com/acorn-walk@8.2.0:
+    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.2.0.tgz}
+    name: acorn-walk
+    version: 8.2.0
+    engines: {node: '>=0.4.0'}
+    dev: true
+
   registry.npmmirror.com/acorn@5.7.4:
     resolution: {integrity: sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/acorn/-/acorn-5.7.4.tgz}
     name: acorn
@@ -4962,6 +4985,13 @@ packages:
     version: 2.20.3
     dev: true
 
+  registry.npmmirror.com/commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz}
+    name: commander
+    version: 7.2.0
+    engines: {node: '>= 10'}
+    dev: true
+
   registry.npmmirror.com/commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commondir/-/commondir-1.0.1.tgz}
     name: commondir
@@ -7768,6 +7798,15 @@ packages:
       pify: registry.npmmirror.com/pify@4.0.1
     dev: true
 
+  registry.npmmirror.com/gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz}
+    name: gzip-size
+    version: 6.0.0
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: registry.npmmirror.com/duplexer@0.1.2
+    dev: true
+
   registry.npmmirror.com/handle-thing@2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz}
     name: handle-thing
@@ -10432,6 +10471,13 @@ packages:
       run-queue: registry.npmmirror.com/run-queue@1.0.3
     dev: true
 
+  registry.npmmirror.com/mrmime@1.0.1:
+    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz}
+    name: mrmime
+    version: 1.0.1
+    engines: {node: '>=10'}
+    dev: true
+
   registry.npmmirror.com/ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz}
     name: ms
@@ -13029,6 +13075,17 @@ packages:
       is-arrayish: registry.npmmirror.com/is-arrayish@0.3.2
     dev: true
 
+  registry.npmmirror.com/sirv@1.0.19:
+    resolution: {integrity: sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/sirv/-/sirv-1.0.19.tgz}
+    name: sirv
+    version: 1.0.19
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': registry.npmmirror.com/@polka/url@1.0.0-next.21
+      mrmime: registry.npmmirror.com/mrmime@1.0.1
+      totalist: registry.npmmirror.com/totalist@1.1.0
+    dev: true
+
   registry.npmmirror.com/sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz}
     name: sisteransi
@@ -13965,6 +14022,13 @@ packages:
     version: 1.0.7
     dev: true
 
+  registry.npmmirror.com/totalist@1.1.0:
+    resolution: {integrity: sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/totalist/-/totalist-1.1.0.tgz}
+    name: totalist
+    version: 1.1.0
+    engines: {node: '>=6'}
+    dev: true
+
   registry.npmmirror.com/tough-cookie@2.5.0:
     resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tough-cookie/-/tough-cookie-2.5.0.tgz}
     name: tough-cookie
@@ -14911,6 +14975,28 @@ packages:
       - utf-8-validate
     dev: true
 
+  registry.npmmirror.com/webpack-bundle-analyzer@4.9.0:
+    resolution: {integrity: sha512-+bXGmO1LyiNx0i9enBu3H8mv42sj/BJWhZNFwjz92tVnBa9J3JMGo2an2IXlEleoDOPn/Hofl5hr/xCpObUDtw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.0.tgz}
+    name: webpack-bundle-analyzer
+    version: 4.9.0
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+    dependencies:
+      '@discoveryjs/json-ext': registry.npmmirror.com/@discoveryjs/json-ext@0.5.7
+      acorn: registry.npmmirror.com/acorn@8.10.0
+      acorn-walk: registry.npmmirror.com/acorn-walk@8.2.0
+      chalk: registry.npmmirror.com/chalk@4.1.2
+      commander: registry.npmmirror.com/commander@7.2.0
+      gzip-size: registry.npmmirror.com/gzip-size@6.0.0
+      lodash: registry.npmmirror.com/lodash@4.17.20
+      opener: registry.npmmirror.com/opener@1.5.2
+      sirv: registry.npmmirror.com/sirv@1.0.19
+      ws: registry.npmmirror.com/ws@7.5.9
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
   registry.npmmirror.com/webpack-chain@6.5.1:
     resolution: {integrity: sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/webpack-chain/-/webpack-chain-6.5.1.tgz}
     name: webpack-chain

+ 47 - 47
src/element-ui.js → src/element-ui.ts

@@ -9,15 +9,15 @@
  */
 import 'element-ui/lib/theme-chalk/index.css';
 import {
-  Scrollbar,
+  // Scrollbar,
   Pagination,
   Dialog,
-  Autocomplete,
+  // Autocomplete,
   Dropdown,
   DropdownMenu,
   DropdownItem,
   Menu,
-  Submenu,
+  // Submenu,
   MenuItem,
   MenuItemGroup,
   Input,
@@ -25,9 +25,9 @@ import {
   Radio,
   RadioGroup,
   RadioButton,
-  Checkbox,
-  CheckboxButton,
-  CheckboxGroup,
+  // Checkbox,
+  // CheckboxButton,
+  // CheckboxGroup,
   Switch,
   Select,
   Option,
@@ -37,36 +37,37 @@ import {
   Table,
   TableColumn,
   DatePicker,
-  TimeSelect,
-  TimePicker,
+  // TimeSelect,
+  // TimePicker,
   Popover,
   Tooltip,
-  Breadcrumb,
-  BreadcrumbItem,
+  // Breadcrumb,
+  // BreadcrumbItem,
   Form,
   FormItem,
   Tabs,
   TabPane,
   Tag,
-  Tree,
-  Alert,
-  Slider,
+  // Tree,
+  // Alert,
+  // Slider,
   Icon,
   Row,
   Col,
   Upload,
-  Progress,
-  Badge,
+  // Progress,
+  // Badge,
   Card,
-  Rate,
-  Steps,
-  Step,
-  Carousel,
-  CarouselItem,
+  // Rate,
+  // Steps,
+  // Step,
+  // Carousel,
+  // CarouselItem,
   Collapse,
   CollapseItem,
-  Cascader,
-  ColorPicker,
+  // Cascader,
+  // ColorPicker,
+  Drawer,
   Transfer,
   Container,
   Header,
@@ -79,19 +80,19 @@ import {
   Notification,
   Descriptions,
   DescriptionsItem,
-  Drawer,
 } from 'element-ui'
 
 export default {
-  install(Vue, options) {
+  install(Vue: any, options: any) {
+    // Vue.use(Scrollbar)
     Vue.use(Pagination)
     Vue.use(Dialog)
-    Vue.use(Autocomplete)
+    // Vue.use(Autocomplete)
     Vue.use(Dropdown)
     Vue.use(DropdownMenu)
     Vue.use(DropdownItem)
     Vue.use(Menu)
-    Vue.use(Submenu)
+    // Vue.use(Submenu)
     Vue.use(MenuItem)
     Vue.use(MenuItemGroup)
     Vue.use(Input)
@@ -99,9 +100,9 @@ export default {
     Vue.use(Radio)
     Vue.use(RadioGroup)
     Vue.use(RadioButton)
-    Vue.use(Checkbox)
-    Vue.use(CheckboxButton)
-    Vue.use(CheckboxGroup)
+    // Vue.use(Checkbox)
+    // Vue.use(CheckboxButton)
+    // Vue.use(CheckboxGroup)
     Vue.use(Switch)
     Vue.use(Select)
     Vue.use(Option)
@@ -111,36 +112,37 @@ export default {
     Vue.use(Table)
     Vue.use(TableColumn)
     Vue.use(DatePicker)
-    Vue.use(TimeSelect)
-    Vue.use(TimePicker)
+    // Vue.use(TimeSelect)
+    // Vue.use(TimePicker)
     Vue.use(Popover)
     Vue.use(Tooltip)
-    Vue.use(Breadcrumb)
-    Vue.use(BreadcrumbItem)
+    // Vue.use(Breadcrumb)
+    // Vue.use(BreadcrumbItem)
     Vue.use(Form)
     Vue.use(FormItem)
     Vue.use(Tabs)
     Vue.use(TabPane)
     Vue.use(Tag)
-    Vue.use(Tree)
-    Vue.use(Alert)
-    Vue.use(Slider)
+    // Vue.use(Tree)
+    // Vue.use(Alert)
+    // Vue.use(Slider)
     Vue.use(Icon)
     Vue.use(Row)
     Vue.use(Col)
     Vue.use(Upload)
-    Vue.use(Progress)
-    Vue.use(Badge)
+    // Vue.use(Progress)
+    // Vue.use(Badge)
     Vue.use(Card)
-    Vue.use(Rate)
-    Vue.use(Steps)
-    Vue.use(Step)
-    Vue.use(Carousel)
-    Vue.use(CarouselItem)
+    // Vue.use(Rate)
+    // Vue.use(Steps)
+    // Vue.use(Step)
+    // Vue.use(Carousel)
+    // Vue.use(CarouselItem)
     Vue.use(Collapse)
     Vue.use(CollapseItem)
-    Vue.use(Cascader)
-    Vue.use(ColorPicker)
+    // Vue.use(Cascader)
+    // Vue.use(ColorPicker)
+    Vue.use(Drawer)
     Vue.use(Transfer)
     Vue.use(Container)
     Vue.use(Header)
@@ -149,8 +151,6 @@ export default {
     Vue.use(Footer)
     Vue.use(Descriptions)
     Vue.use(DescriptionsItem)
-    Vue.use(Drawer)
-    Vue.use(Scrollbar)
     Vue.use(Loading.directive)
 
     Vue.prototype.$loading = Loading.service

+ 0 - 4
src/main.ts

@@ -4,17 +4,13 @@ import router from '@/router'                 // api: https://github.com/vuejs/v
 import store from '@/store'                   // api: https://github.com/vuejs/vuex
 import VueCookie from 'vue-cookie'            // api: https://github.com/alfhen/vue-cookie
 import '@/icons'                              // api: http://www.iconfont.cn/
-import element from './element-ui'
 import '@/assets/scss/index.scss'
-import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
 import { isAuth } from '@/utils'
 
 Vue.use(VueCookie)
-Vue.use(element)
 Vue.config.productionTip = false
 
 // 挂载全局
-Vue.prototype.$http = httpRequest // ajax请求方法
 Vue.prototype.isAuth = isAuth     // 权限方法
 
 // 保存整站vuex本地储存初始状态

+ 49 - 41
src/views/common/404.vue

@@ -12,50 +12,58 @@
 </template>
 
 <script>
-  export default {
-  }
+import { Button } from 'element-ui/lib/button';
+export default {
+  components: { Button }
+}
 </script>
 
 <style lang="scss">
-  .site-wrapper.site-page--not-found {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    .site-content__wrapper {
-      padding: 0;
-      margin: 0;
-      background-color: #fff;
-    }
-    .site-content {
-      position: fixed;
-      top: 15%;
-      left: 50%;
-      z-index: 2;
-      padding: 30px;
-      text-align: center;
-      transform: translate(-50%, 0);
-    }
-    .not-found-title {
-      margin: 20px 0 15px;
-      font-size: 10em;
-      font-weight: 400;
-      color: rgb(55, 71, 79);
-    }
-    .not-found-desc {
-      margin: 0 0 30px;
-      font-size: 26px;
-      text-transform: uppercase;
-      color: rgb(118, 131, 143);
-      > em {
-        font-style: normal;
-        color: #ee8145;
-      }
-    }
-    .not-found-btn-gohome {
-      margin-left: 30px;
+.site-wrapper.site-page--not-found {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+
+  .site-content__wrapper {
+    padding: 0;
+    margin: 0;
+    background-color: #fff;
+  }
+
+  .site-content {
+    position: fixed;
+    top: 15%;
+    left: 50%;
+    z-index: 2;
+    padding: 30px;
+    text-align: center;
+    transform: translate(-50%, 0);
+  }
+
+  .not-found-title {
+    margin: 20px 0 15px;
+    font-size: 10em;
+    font-weight: 400;
+    color: rgb(55, 71, 79);
+  }
+
+  .not-found-desc {
+    margin: 0 0 30px;
+    font-size: 26px;
+    text-transform: uppercase;
+    color: rgb(118, 131, 143);
+
+    >em {
+      font-style: normal;
+      color: #ee8145;
     }
   }
+
+  .not-found-btn-gohome {
+    margin-left: 30px;
+  }
+}
 </style>

+ 1 - 8
src/views/common/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mod-home">
+  <div>
     首页
   </div>
 </template>
@@ -7,10 +7,3 @@
 <script>
 export default {}
 </script>
-
-<style>
-.mod-home {
-  line-height: 1.5;
-}
-</style>
-

+ 4 - 1
src/views/common/login.vue

@@ -43,9 +43,12 @@
 import { getUUID } from '@/utils'
 import Verify from '@/components/verifition/Verify'
 import { encrypt } from '@/utils/crypto'
+import { Form } from "element-ui/lib/form"
+import { FormItem } from "element-ui/lib/form-item"
+
 export default {
   components: {
-    Verify
+    Verify, Form, FormItem
   },
   data() {
     return {

+ 7 - 0
src/views/main.vue

@@ -13,9 +13,16 @@
 
 <script>
 import '@/avue'
+import Vue from 'vue'
 import MainNavbar from './main-navbar'
 import MainSidebar from './main-sidebar'
 import MainContent from './main-content'
+import element from '@/element-ui'
+
+import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
+Vue.prototype.$http = httpRequest // ajax请求方法
+
+Vue.use(element)
 
 export default {
   data() {

+ 31 - 20
vue.config.js

@@ -80,6 +80,16 @@ module.exports = {
       .loader('svg-sprite-loader')
       .end()
 
+    config
+      .when(process.env.ANALYZER == 'true', config => {
+        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+        config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin).tap(() => [
+          {
+            analyzerPort: "auto"
+          }
+        ])
+      })
+
     config
       .when(process.env.NODE_ENV !== 'development',
         config => {
@@ -96,40 +106,41 @@ module.exports = {
               chunks: 'all',
               cacheGroups: {
                 libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial', // only package third parties that are initially dependent
-                  reuseExistingChunk: true
+                  name: 'libs',
+                  // test: /[\\/]node_modules[\\/]/,
+                  priority: 50,
+                  chunks: 'initial',
                 },
                 elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+                  name: 'elementUI', // split elementUI into a single package
+                  priority: 40,
+                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
+                  chunks: 'async',
                 },
                 avue: {
-                  name: 'chunk-avue',
-                  priority: 15,
+                  name: 'avue', // split avue into a single package
+                  priority: 41,
                   test: /[\\/]node_modules[\\/]@smallwei(.*)/,
+                  chunks: 'async',
                   reuseExistingChunk: true
                 },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
+                utils: {
+                  name: 'utils',
+                  test: /([\\/]src[\\/]utils)|lodash|axios|crypto-js/,
+                  priority: 30,
+                  chunks: 'async',
                 },
                 styles: {
-                  name: 'styles',
-                  test: /.(css|scss)$/,
+                  name: 'styles',  // pack all remaining style files
+                  test: /\.(css|scss)$/,
+                  priority: 45,
                   chunks: 'all',
-                  priority: 50
+                  reuseExistingChunk: true
                 }
               }
             })
           // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-          config.optimization.runtimeChunk('single')
+          config.optimization.runtimeChunk(false)
         }
       )
   }