配置优化

README.md

+#专家版 APP 内嵌 H5 页面
+
 # React-webpack ------基于 antd-mobile 等库的一套移动端完美脚手架配置
 
 # 包管理器使用 yarn,下载后 yarn init ,然后 yarn 即可获取所有依赖

build/webpack.base.js

@@ -7,9 +7,10 @@ function resolveRoot(dir) {
 
 module.exports = {
   entry: {
-    vendor: ['babel-polyfill'],
+    vendor: ['babel-polyfill', 'react', 'react-dom', 'react-router-dom', 'antd-mobile', 'moment'],
     app: resolveRoot('src/index.js')
   },
+  // , 'react', 'moment', 'antd-mobile', 'react-photoswipe'
   output: {
     path: resolveRoot('dist')
   },
@@ -21,11 +22,5 @@ module.exports = {
       '@static': resolveRoot('src/static'),
       '@': resolveRoot('src')
     }
-  },
-  optimization: {
-    runtimeChunk: true,
-    splitChunks: {
-      chunks: 'all'
-    }
   }
 };

build/webpack.prod.js

@@ -198,5 +198,42 @@ module.exports = merge(base, {
     //   include: [/\.js$/, /\.css$/, /\.html$/, /\.jpg/, /\.jpeg/, /\.svg/, /\.webp/, /\.png/]
     // }),
   ],
-  mode: 'production'
+  mode: 'production',
+  optimization: {
+    runtimeChunk: true,
+    splitChunks: {
+      chunks: 'async',
+      minSize: 30000, // 形成一个新代码块最小的体积
+      // maxAsyncRequests: 5, // 按需加载时候最大的并行请求数
+      // maxInitialRequests: 3, // 最大初始化请求数
+      automaticNameDelimiter: '~', // 打包分割符
+      name: true,
+      cacheGroups: {
+        vendor: {
+          // 打包两个页面的公共代码
+          test: /react|react-dom|react-router-dom|babel-polyfill|antd-mobile/,
+          chunks: 'async',
+          priority: 5 // 优先
+        },
+        moment: {
+          test: /moment/,
+          name: 'moment', // 单独将 elementUI 拆包
+          priority: 20 // 权重需大于其它缓存组
+        },
+        // 'async-commons': {
+        //   // 异步加载公共包、组件等
+        //   chunks: 'async',
+        //   minChunks: 2,
+        //   name: 'async-commons',
+        //   priority: 10
+        // },
+        commons: {
+          // 其他同步加载公共包
+          chunks: 'initial',
+          priority: 2,
+          minChunks: 2
+        }
+      }
+    }
+  }
 });