@autobest-ui/scripts 1.1.1 → 1.3.0

package/README.md

@@ -118,3 +118,33 @@ module.exports = function(
 该方式，主要应用于启动程序前，自定义环境变量，主要用于get**EnvConfig()方法的多样性。
 
 例如： `cross-env REACT_APP_ENV=local react-ssr start`
+
+#### 背景图片问题
+推荐把静态资源放到静态库，并使用sass环境变量`$env`进行本地调试，若想使用本地文件，需特殊处理。
+
+- scss环境变量
+```scss
+// 其中 $env = process.env.NODE_ENV， 满足background-image链接不全、区分本地与线上样式等需求。
+if($env == 'development','为true的样式', ‘为false的样式’）
+// 例子
+$AssetBaseUrl: 'https://assets-web.dev.autobestdevops.com';
+$AssetCommonPath: '/common-uiasset';
+$AssetWwwPath: '/www-uiasset';
+
+@mixin getBgImgFromCommon($url) {
+  background-image: if($env == 'development', url($AssetBaseUrl + $AssetCommonPath + $url), url($AssetCommonPath + $url));
+}
+
+@mixin getBgImgFromWww($url) {
+  background-image: if($env == 'development', url($AssetBaseUrl + $AssetWwwPath + $url), url($AssetWwwPath + $url));
+}
+```
+
+- 使用本地文件注意事项
+```scss
+// background image 不解析以"http、https"开头或者/common-uiasset/|/wwwasset/|/onlineasset/开头的静态资源， 例如：'/common-uiasset/img.png'
+// 所以本地静态资源需要特别注意，不能创建/common-uiasset/|/wwwasset/|/onlineasset/文件夹
+.live-chat {
+  background: url('imgs/图片名.resolving.png') 0 center no-repeat;
+}
+```

package/common/start.js

@@ -45,14 +45,23 @@ function openStartRun(webpackFactory) {
     const config = webpackFactory({ ...appConfig, port: PORT, startOpenPath }, extendEnv);
     const compiler = webpack(config);
     const server = new WebpackDevServer(options, compiler);
+    let hasOpenBrowser = false;
+
+    // 添加钩子函数，弹出浏览器
+    compiler.hooks.done.tap('OpenBrowser', () => {
+      if (!hasOpenBrowser) {
+        hasOpenBrowser = true;
+        setTimeout(() => {
+          open(`http://localhost:${PORT}${startOpenPath}`);
+        }, 600);
+      }
+    });
 
     server.startCallback(err => {
       if (err) {
         // eslint-disable-next-line no-console
         console.log(err);
-        return;
       }
-      open(`http://localhost:${PORT}${startOpenPath}`);
     });
     ['SIGINT', 'SIGTERM'].forEach(sig => {
       process.on(sig, () => {

package/common/webpack.common.js

@@ -8,7 +8,8 @@ const appWebpackConfigPath = getProjectPath('/config/app.webpack.js');
 
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
-const imageResolvingRegex = /\.resolving\.(png|jpg|jepg|gif)$/;
+const imageNotResolvingRegex = /^\/(common-uiasset|wwwasset|onlineasset)\//;
+const httpRegex = /^https?:\/\//;
 
 function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption = {} }) {
   const result = [
@@ -17,8 +18,8 @@ function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption =
       options: {
         ...moduleOption,
         url: {
-          // background image只解析以".resolving."结尾的静态资源， 例如：'img.resolving.png'
-          filter: url => imageResolvingRegex.test(url)
+          // background image不解析以"http、https"开头或者/common-uiasset/|/wwwasset/|/onlineasset/开头的静态资源， 例如：'/common-uiasset/img.png'
+          filter: url => !httpRegex.test(url) && !imageNotResolvingRegex.test(url)
         }
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/scripts",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "private": false,
   "description": "utils for project tools",
   "bin": {
@@ -92,5 +92,5 @@
     "webpack-merge": "5.8.0",
     "webpack-node-externals": "3.0.0"
   },
-  "gitHead": "8376a3c945dbf5c9e7638f93a6e1fc61955f65df"
+  "gitHead": "6a50d3def5d2d02802c524f99663347f410762c0"
 }

package/spaConfig/webpack.prod.js

@@ -21,6 +21,8 @@ module.exports = function (appConfig, extendEnv) {
       chunkFilename: `js/[name].chunk.js?v=${extendEnv.version}`
     },
     optimization: {
+      // 在不同的编译中不变的短数字id。有益于长期缓存。在生产模式中会默认开启。
+      chunkIds: 'deterministic',
       concatenateModules: true,
       minimizer: [
         // 压缩js
@@ -49,20 +51,27 @@ module.exports = function (appConfig, extendEnv) {
         new CssMinimizerPlugin()
       ],
       splitChunks: {
-        chunks: 'initial',
-        minSize: 0,
-        // 按需加载时并行请求的最大数量
-        maxAsyncRequests: 5,
-        // 入口位置最大的请求数量
-        maxInitialRequests: 3,
-        automaticNameDelimiter: '~',
+        chunks: 'async',
+        // 大于3kb才会分割
+        minSize: 3072,
+        minRemainingSize: 0,
+        minChunks: 1,
+        // 按需加载时的最大并行请求数。
+        maxAsyncRequests: 300,
+        // 入口点的最大并行请求数。
+        maxInitialRequests: 300,
+        enforceSizeThreshold: 50000,
         cacheGroups: {
-          commons: {
+          defaultVendors: {
             test: /[\\/]node_modules[\\/]/,
-            chunks: 'initial',
-            name: 'vendors',
-            minChunks: 1,
-            priority: 10
+            minChunks: 2,
+            priority: -10,
+            reuseExistingChunk: true
+          },
+          default: {
+            minChunks: 3,
+            priority: -20,
+            reuseExistingChunk: true
           }
         }
       },