Chore(release): 1.2.9

.env

@@ -2,6 +2,7 @@
 # 注释只能在单独的一行里($需要转义: \$)
 
 APP_NAME=vue-tpl
+APP_VERSION=0.0.1
 # 发布地址(建议相对路径, 比如 '' './')
 BASE_URL=''
 # 接口地址(hash路由建议相对路径)

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 更新日志
 
+## v 1.2.9
+
+- 修复异步css chunk包含不定数量(皮肤/默认)文件问题等
+- 异步选择器(ChooserAsyncFunctional/ChooserAsync)active状态处理等
+
 ## v 1.2.8
 
 - 重用本地chunk名字典等

README.md

@@ -67,6 +67,7 @@ VSCode 插件
 
 ```bash
 git config core.ignorecase false # 使git对文件名大小写敏感
+# 或者修改 .git/config [core] ignorecase = false
 ```
 
 有 `.lock` 文件时**只需**执行 `yarn` (或`npm i`) 安装即可, 否则如下:
@@ -248,10 +249,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 - 越接近 src 目录的, 测试覆盖率也应越高; 被测试的代码应加注释`@test: true`表示在对应目录下包含测试用例, 否则指明测试代码路径或就近建`__tests__`目录; 修改了测试覆盖的代码后, 应视情况增加测试内容
 - 尽量**不要使用全局注册**(插件/组件/指令/混入等)以优化性能及chunk并且代码更清晰、易维护
 - 尽量**按照依赖库的文档描述**来使用她, 从其源码(src)引入模块(css/scss/.../js/mjs/ts/jsx/tsx/vue), 将可能**不会被转译**且更可能随版本更新改变, 需要时可以从其构建后的 lib/dist 等目录引入或者增加一些配置(需要了解模块解析及转码规则和相关插件, 不推荐)
-- 提交时 `lint-stage` 会删除未暂存的新增文件, 待相关命令(比如lint)执行完后再恢复, 所以若报错, 被删除的文件将无法恢复(有几个类似的issue, 10.0.0解决了, 但是这都10.0.7了), 解决方案有如下几种:
-  1. 确保未暂存的文件里没有新增的, 或者在编辑器打开或手动备份新增的文件用以恢复. 最好能控制好提交粒度, 全部暂存后再提交
-  2. 先执行 `yarn lint` 等相关命令, 待消除所有错误后, 再提交
-  3. 确保开发时无相关报错(浏览器中页面遮罩显示错误, 控制台打印警告), 特别注意 `console.log` 和 `debugger`, 只在开发环境是警告, 其他都是错误
+- 若开发环境出现缓存相关错误信息导致热更新慢, 可以删除 `node_modules/.cache` 文件夹再试
 
 ### 风格建议
 
@@ -438,7 +436,12 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
   </script>
 
   <!-- 基础样式 -->
-  <style lang="scss" module skin="skin=|foo.scss">
+  <style lang="scss" module skin="|">
+  .bar {
+    display: none;
+  }
+  </style>
+  <style lang="scss" module skin="|foo.scss">
   .bar {
     color: $red;
   }
@@ -581,6 +584,9 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
   // ...
   ```
 
+- 路由视图不需要被缓存的, 可以在自己的`deactivated`钩子销毁实例`this.$destroy()`
+- 所有响应路由变化的可缓存组件(不缓存如上), 应确保失活/休眠后不再响应路由变化, 推荐使用 `@com/ChooserAsyncFunctional` 包裹
+
 ### 配置和优化
 
 可通过 [vue.config.js](vue.config.js) (入口)文件配置工具链; `.env.*` 配置环境变量; 根目录下各配置文件配置相应工具
@@ -591,6 +597,13 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 - 对多个 js chunk 共同依赖的模块进行缓存/单独提取, 大模块只出现在一个chunk里(cacheGroups)
 - 相同chunk下的基础样式和各个皮肤样式文件分别合并 或 其他合理的合并策略【webpack 5 支持设置 css chunk 的 minSize/maxSize 啦】
 - [现代模式](https://cli.vuejs.org/zh/guide/browser-compatibility.html#现代模式)
+- 打包/热更新慢(已使用 `hard-source-webpack-plugin` 插件动态追踪缓存依赖):
+  1. (第三方)依赖静态化
+    - 优点: 静态化依赖只需一次构建; 支持CDN加载(可供多个应用使用)
+    - 缺点: 增加文件体积, 消耗浏览器资源; 需要更新维护工作
+  2. 开发调试时支持指定需要的模块, 比如指定路由
+    - 优点: 只需构建指定模块, 提升热更新效率
+    - 缺点: 未解决打包慢问题
 
 ## 部署(nginx)
 
@@ -639,19 +652,21 @@ http {
   gzip_buffers 32 16k;
   gzip_types application/xml application/json application/ld+json application/rss+xml application/atom+xml application/xhtml+xml application/font-woff application/x-font-ttf application/x-javascript application/javascript application/x-httpd-php application/x-font-woff application/vnd.geo+json application/octet-stream application/manifest+json application/vnd.ms-fontobject application/x-web-app-manifest+json font/opentype text/vtt text/css text/plain text/vcard text/javascript text/x-component text/cache-manifest text/vnd.rim.location.xloc text/x-cross-domain-policy image/svg+xml;
 
-  # http 跳转到 https
   # server {
-    # server_name  xxx;
-    # listen       80;
-    # listen       [::]:80;
+      # http 跳转到 https
+  #   server_name  xxx;
+  #   listen       80;
+  #   listen       [::]:80;
 
-    # return 301 https://$host$request_uri; # 得用 $host,不造为啥 $server_name 不行
+  #   return 301 https://$host$request_uri; # 得用 $host,不造为啥 $server_name 不行
   # }
-  # http / (https + http2)
+
   server {
     # server_name  xxx;
+    # http
     listen       80;
     listen       [::]:80;
+    # https + http2
     listen       443 ssl http2;
     listen       [::]:443 ssl http2;
 
@@ -685,7 +700,7 @@ http {
 
       index index.html;
       alias xxx/;
-      try_files $uri $uri.html $uri/ /;
+      try_files $uri $uri.html $uri/ / =404;
     }
     location /api {
       proxy_pass https?://xxx:xxx/xxx;
@@ -770,6 +785,11 @@ http {
   })
   ```
 
+- 提交时 `lint-stage` 【10.0.8已修复】会删除未暂存的新增文件(撤销全部未暂存修改), 待相关命令(比如lint)执行完后再恢复, 所以若报错, 被删除的文件将**无法恢复**, 解决方案有如下几种:
+  1. 确保未暂存的文件里没有新增的, 或者在编辑器打开或手动备份新增的文件用以恢复. 最好能控制好提交粒度, 全部暂存后再提交
+  2. 先执行 `yarn lint` 等相关命令, 待消除所有错误后, 再提交
+  3. 确保开发时无相关报错(浏览器中页面遮罩显示错误, 控制台打印警告), 特别注意 `console.log` , `debugger` 和 `定义但未使用变量`, 只在开发环境是警告, 其他都是错误
+
 ### 问题及思考
 
 - Vue 异步组件加载失败重试: 最好还是 Vue 对异步组件提供支持[#9788](https://github.com/vuejs/vue/issues/9788)

build/skinLoader.js

@@ -12,7 +12,7 @@ const INDEX = '/index.scss'
 const REG_EXTENSION = /\.scss$/
 const REG_INDEX = /\/index\.scss$/
 const REG_SCSS = /\/[^/]+\.scss$/
-const REG_SKIN = /[?&]skin=([^|& ]*)\|?([^& ]*)/
+const REG_SKIN = /(?:\?|%3F|&|%26)skin(?:=|%3D)([^|&% ]*)(?:\||%7C)?([^&% ]*)/i
 
 const CACHE_EXISTS = {}
 const DIR_SRC = path.resolve('src')
@@ -91,7 +91,7 @@ function init(ENV = process.env) {
 function getSkinByQuery(temp) {
   if (SKIN) {
     temp = REG_SKIN.exec(temp)
-    let skin = temp && { name: temp[1], path: temp[2] }
+    let skin = temp && { name: temp[1], path: decodeURIComponent(temp[2]) }
     if (skin) {
       // 指定皮肤
       ;(skin.path &&

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-tpl",
   "author": "毛瑞 <[email protected]>",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "private": false,
   "license": "MIT",
   "keywords": [
@@ -29,75 +29,75 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
-    "crypto-js": "^3.3.0",
+    "crypto-js": "3.3.0",
     "d3": "^5.15.0",
-    "echarts": "^4.6.0",
+    "echarts": "^4.7.0",
     "element-ui": "^2.13.0",
     "jsencrypt": "^3.0.0-rc.1",
     "luma.gl": "^7.3.2",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "pixi.js": "^5.2.1",
     "pixi.js-legacy": "^5.2.1",
-    "register-service-worker": "^1.6.2",
-    "three": "^0.113.2",
+    "register-service-worker": "^1.7.1",
+    "three": "^0.114.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-i18n": "^8.15.3",
-    "vue-property-decorator": "^8.4.0",
-    "vue-router": "^3.1.5",
-    "vuex": "^3.1.2",
+    "vue-i18n": "^8.15.6",
+    "vue-property-decorator": "^8.4.1",
+    "vue-router": "^3.1.6",
+    "vuex": "^3.1.3",
     "vuex-class": "^0.3.2",
     "vuex-module-decorators": "^0.16.1",
     "zdog": "^1.1.1",
-    "zrender": "^4.2.0"
+    "zrender": "^4.3.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-default-from": "^7.8.3",
     "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
     "@babel/plugin-proposal-function-sent": "^7.8.3",
     "@babel/plugin-proposal-private-methods": "^7.8.3",
-    "@types/crypto-js": "^3.1.43",
+    "@types/crypto-js": "3.1.43",
     "@types/d3": "^5.7.2",
     "@types/echarts": "^4.4.3",
-    "@types/jest": "^25.1.3",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
-    "@vue/cli-plugin-babel": "^4.2.2",
-    "@vue/cli-plugin-e2e-cypress": "^4.2.2",
-    "@vue/cli-plugin-eslint": "^4.2.2",
-    "@vue/cli-plugin-pwa": "^4.2.2",
-    "@vue/cli-plugin-router": "^4.2.2",
-    "@vue/cli-plugin-typescript": "^4.2.2",
-    "@vue/cli-plugin-unit-jest": "^4.2.2",
-    "@vue/cli-plugin-vuex": "^4.2.2",
-    "@vue/cli-service": "^4.2.2",
+    "@types/jest": "^25.1.4",
+    "@typescript-eslint/eslint-plugin": "^2.25.0",
+    "@typescript-eslint/parser": "^2.25.0",
+    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-plugin-e2e-cypress": "^4.2.3",
+    "@vue/cli-plugin-eslint": "^4.2.3",
+    "@vue/cli-plugin-pwa": "^4.2.3",
+    "@vue/cli-plugin-router": "^4.2.3",
+    "@vue/cli-plugin-typescript": "^4.2.3",
+    "@vue/cli-plugin-unit-jest": "^4.2.3",
+    "@vue/cli-plugin-vuex": "^4.2.3",
+    "@vue/cli-service": "^4.2.3",
     "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/eslint-config-typescript": "^5.0.1",
-    "@vue/test-utils": "^1.0.0-beta.31",
-    "alternate-css-extract-plugin": "^0.9.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/test-utils": "^1.0.0-beta.32",
+    "alternate-css-extract-plugin": "^0.9.2",
     "compression-webpack-plugin": "^3.1.0",
     "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.1",
+    "eslint-plugin-vue": "^6.2.2",
     "fibers": "^4.0.2",
     "hard-source-webpack-plugin": "^0.13.1",
-    "lint-staged": "^10.0.7",
+    "lint-staged": "^10.0.9",
     "postcss-preset-env": "^6.7.0",
     "regenerate": "^1.4.0",
     "regjsgen": "^0.5.1",
-    "regjsparser": "^0.6.3",
-    "sass": "^1.25.0",
+    "regjsparser": "^0.6.4",
+    "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
-    "stylelint": "^13.2.0",
+    "stylelint": "^13.2.1",
     "stylelint-config-scss-maorey": "^1.1.1",
     "stylelint-webpack-plugin": "^1.2.3",
-    "typescript": "^3.8.2",
+    "typescript": "^3.8.3",
     "unicode-match-property-ecmascript": "^1.0.4",
-    "unicode-match-property-value-ecmascript": "^1.1.0",
+    "unicode-match-property-value-ecmascript": "^1.2.0",
     "vue-template-compiler": "^2.6.11",
     "vue-tsx-support": "^2.3.3",
     "webpack-remove-strict-mode-plugin": "^1.0.0"

public/index.html

@@ -71,13 +71,13 @@
 <!-- 手写页面骨架 -->
 <style>
   body {
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
     background: #0d1a25;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 </style>
-<p style="margin: 0; padding-top: 45vh; text-align: center; color: snow; font-size: x-large;">
+<p style="margin: 0; padding-top: 45vh; color: snow; font-size: x-large; text-align: center;">
   加载中，请稍候...
   <!-- 不支持js脚本提示 -->
   <noscript><strong>您的终端未启用JavaScript，请启用后重试</strong></noscript>
@@ -86,4 +86,8 @@
 <!-- 自动插入打包脚本 -->
 <%= isProd ? '</body>' : '</div></body>' %>
 
+  <script>
+    // 打印版本信息
+    console.log('%cbuild: <%= process.env.APP_VERSION %>','background:green;color:white')
+  </script>
 </html>

public/other.html

@@ -71,12 +71,12 @@
 <!-- 手写页面骨架 -->
 <style>
   body {
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 </style>
-<p style="margin: 0; padding-top: 45vh; text-align: center; color: snow; font-size: x-large;">
+<p style="margin: 0; padding-top: 45vh; color: snow; font-size: x-large; text-align: center;">
   加载中，请稍候...
   <!-- 不支持js脚本提示 -->
   <noscript><strong>您的终端未启用JavaScript，请启用后重试</strong></noscript>
@@ -85,4 +85,8 @@
 <!-- 自动插入打包脚本 -->
 <%= isProd ? '</body>' : '</div></body>' %>
 
+  <script>
+    // 打印版本信息
+    console.log('%cbuild: <%= process.env.APP_VERSION %>','background:green;color:white')
+  </script>
 </html>