chore: 打包优化

.browserslistrc

 > 1%
-last 2 versions
+last 2 years
 not dead

.gitignore

@@ -3,7 +3,7 @@ node_modules
 /dist
 src/assets/font
 tailwind.css
-
+auto-imports.d.ts
 # local env files
 .env.local
 .env.*.local

auto-imports.d.ts

-// Generated by 'unplugin-auto-import'
-// We suggest you to commit this file into source control
-declare global {
-  const ElAside: typeof import('element-plus/es')['ElAside']
-  const ElAvatar: typeof import('element-plus/es')['ElAvatar']
-  const ElBadge: typeof import('element-plus/es')['ElBadge']
-  const ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
-  const ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
-  const ElButton: typeof import('element-plus/es')['ElButton']
-  const ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-  const ElContainer: typeof import('element-plus/es')['ElContainer']
-  const ElDropdown: typeof import('element-plus/es')['ElDropdown']
-  const ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-  const ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-  const ElForm: typeof import('element-plus/es')['ElForm']
-  const ElFormItem: typeof import('element-plus/es')['ElFormItem']
-  const ElHeader: typeof import('element-plus/es')['ElHeader']
-  const ElInput: typeof import('element-plus/es')['ElInput']
-  const ElLoadingDirective: typeof import('element-plus/es')['ElLoadingDirective']
-  const ElMain: typeof import('element-plus/es')['ElMain']
-  const ElMenu: typeof import('element-plus/es')['ElMenu']
-  const ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-  const ElRow: typeof import('element-plus/es')['ElRow']
-  const ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-}
-export {}

package.json

@@ -72,7 +72,8 @@
     "svgtofont": "^3.13.1",
     "typescript": "^4.5.4",
     "typescript-json-serializer": "^3.4.4",
-    "unplugin-vue-components": "^0.17.9",
+    "unplugin-auto-import": "^0.5.5",
+    "unplugin-vue-components": "^0.17.11",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "engines": {

src/shared/components/global/query-wrapper/index.vue

 <template>
-  <div v-loading="loading">
+  <div>
     <slot v-if="!loading" />
   </div>
 </template>

vue.config.js

@@ -5,6 +5,7 @@ const sign = process.argv[4]
 const webpackBundleAnalyzer = false
 const productionGzipExtensions = ['js', 'css']
 const Components = require('unplugin-vue-components/webpack')
+const AutoImport = require('unplugin-auto-import/webpack')
 const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 const { EnvironmentPlugin, ProvidePlugin } = require('webpack')
 const { snakeCase, toUpper } = require('lodash')
@@ -69,33 +70,13 @@ const chainProd = config => {
     .options({
       name: 'assets/[name].[hash:8].[ext]',
     })
-  // 公共代码抽离
-  config.optimization = {
-    // 分割代码块
-    splitChunks: {
-      cacheGroups: {
-        //公用模块抽离
-        common: {
-          chunks: 'initial',
-          minSize: 0, //大于0个字节
-          minChunks: 2, //抽离公共代码时，这个代码块最小被引用的次数
-        },
-        //第三方库抽离
-        vendor: {
-          priority: 1, //权重
-          test: /node_modules/,
-          chunks: 'initial',
-          minSize: 0, //大于0个字节
-          minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
-        },
-      },
-    },
-  }
-  new CompressionWebpackPlugin({
-    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
-    threshold: 8192,
-    minRatio: 0.8,
-  })
+  config.plugins.push(
+    new CompressionWebpackPlugin({
+      test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+      threshold: 8192,
+      minRatio: 0.8,
+    }),
+  )
 }
 
 module.exports = defineConfig({
@@ -136,7 +117,42 @@ module.exports = defineConfig({
     isProduction && chainProd(config)
   },
   configureWebpack: {
+    optimization: {
+      runtimeChunk: 'single', // enable "runtime" chunk
+      splitChunks: {
+        chunks: 'all',
+        maxInitialRequests: Infinity,
+        minSize: 0,
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name(module) {
+              // get the name. E.g. node_modules/packageName/not/this/part.js
+              // or node_modules/packageName
+              try {
+                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
+
+                return `vendor.${packageName.replace('@', '')}`
+              } catch (e) {
+                return 'vendor'
+              }
+            },
+            chunks: 'all',
+          },
+          env: {
+            test: /envVariables/,
+            chunks: 'all',
+          },
+        },
+      },
+    },
+    performance: {
+      hints: false,
+    },
     plugins: [
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
       Components({
         resolvers: [ElementPlusResolver()],
       }),
@@ -154,6 +170,7 @@ module.exports = defineConfig({
   devServer: {
     host: '0.0.0.0',
     port: appConfig.serverPort,
+    compress: true,
     proxy: {
       // 开发环境代理配置
       '/root': {

yarn.lock

@@ -1205,7 +1205,7 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
   integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
 
-"@rollup/pluginutils@^4.1.1":
+"@rollup/pluginutils@^4.1.1", "@rollup/pluginutils@^4.1.2":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.2.tgz#ed5821c15e5e05e32816f5fb9ec607cdf5a75751"
   integrity sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==
@@ -10852,10 +10852,22 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.npm.taobao.org/unpipe/download/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unplugin-vue-components@^0.17.9:
-  version "0.17.9"
-  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.17.9.tgz#a2acc9b4e073f52df82d2036a318d76f0c66538b"
-  integrity sha512-SZrK3T/uEoP2g2bH+8DwBznoqlS0dI7kQvCmHmL8HmTXdM78kh5P/9SN5IwuNpfbmXoGXWJPB8Pr8Ke8zsgpmA==
+unplugin-auto-import@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/unplugin-auto-import/-/unplugin-auto-import-0.5.5.tgz#502f47269efdaeb269d54e3e2707634ac9b6a31b"
+  integrity sha512-PAP/6WdqWtGhlQBvlVZ7qmhHbLcTYSsARtFSbY/jaUx/SaQkRT7SvronHIKEvx4bPmS+l4erQ9gQKSBBPzvUnQ==
+  dependencies:
+    "@antfu/utils" "^0.3.0"
+    "@rollup/pluginutils" "^4.1.2"
+    local-pkg "^0.4.0"
+    magic-string "^0.25.7"
+    resolve "^1.20.0"
+    unplugin "^0.2.21"
+
+unplugin-vue-components@^0.17.11:
+  version "0.17.11"
+  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.17.11.tgz#ce5ba9692236cdcfa6750c4c7ad999747c3c2db4"
+  integrity sha512-u5MQ0TbikszRelCt6EA/HskGtGkGLDxi7tQ4/4tcEPWkH3yXSZRJCOeLF5MSdxN1SiGjaJ0I9zeHjoZFC3FvRw==
   dependencies:
     "@antfu/utils" "^0.3.0"
     "@rollup/pluginutils" "^4.1.1"