perf(package.json & vue.config.js): about some optimized configurations

Optimize packaging configuration, update dependent versions, and improve documentation

README.md

@@ -1122,6 +1122,18 @@ Vscode setting.json 设置
 
 ```
 
+### <span id="pettier">✅ 常见问题 </span>
+
+#### 1.node-sass 安装报错
+
+由于不同机器上的node版本不完全相同，会导致node-sass在安装依赖的过程中报错，这时候运行
+
+```bash
+npm rebuild node-sass
+```
+即可顺利安装依赖
+
+
 [▲ 回顶部](#top)
 
 # 鸣谢 ​

package.json

@@ -11,15 +11,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "core-js": "^3.6.4",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.15",
     "regenerator-runtime": "^0.13.5",
-    "vant": "^2.10.2",
+    "vant": "2.12.16",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -30,12 +30,14 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
+    "compression-webpack-plugin": "5.0.1",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.14.1",
     "postcss-pxtorem": "^5.1.1",
     "sass-loader": "^8.0.2",
     "script-ext-html-webpack-plugin": "^2.1.4",
+    "uglifyjs-webpack-plugin": "2.2.0",
     "vue-template-compiler": "^2.6.11",
     "webpack-bundle-analyzer": "^3.8.0"
   }

vue.config.js

@@ -6,6 +6,11 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const resolve = dir => path.join(__dirname, dir)
 // page title
 const name = defaultSettings.title || 'vue mobile template'
+
+// 引入gzip压缩
+// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+// const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
 // 生产环境，测试和正式
 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
 // externals
@@ -82,10 +87,34 @@ module.exports = {
     config.name = name
 
     // 为生产环境修改配置...
-    // if (IS_PROD) {
-    //   // externals
-    //   config.externals = externals
-    // }
+    if (IS_PROD) {
+      // gzip压缩(需要服务器支持)
+      // const productionGzipExtensions = ['html', 'js', 'css']
+      // config.plugins.push(
+      //   new CompressionWebpackPlugin({
+      //     filename: '[path].gz[query]',
+      //     algorithm: 'gzip',
+      //     test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+      //     threshold: 10240, // 只有大小大于该值的资源会被处理 10240
+      //     minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
+      //     deleteOriginalAssets: false // 删除原文件
+      //   }),
+      //   new UglifyJsPlugin({
+      //     uglifyOptions: {
+      //       // 生产环境自动删除console
+      //       compress: {
+      //         drop_debugger: true,
+      //         drop_console: true,
+      //         pure_funcs: ['console.log']
+      //       }
+      //     },
+      //     sourceMap: false,
+      //     parallel: true
+      //   })
+      // )
+      // externals
+      // config.externals = externals
+    }
   },
 
   chainWebpack: config => {