build: split chunk (#4303)

build/release-site.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env sh
 rm -rf docs/dist
 
-npx cross-env NODE_ENV=production webpack --config build/webpack.site.js
+npx cross-env NODE_ENV=production webpack --config build/webpack.site.prd.js
 
 superman-cdn /vant ./docs/dist/*.js
 

build/webpack.base.js

@@ -1,24 +1,8 @@
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = {
   mode: 'development',
-  entry: {
-    'vant-docs': './docs/site/desktop/main.js',
-    'vant-mobile': './docs/site/mobile/main.js'
-  },
-  output: {
-    path: path.join(__dirname, '../docs/dist'),
-    publicPath: '/',
-    chunkFilename: 'async_[name].js'
-  },
-  devServer: {
-    open: true,
-    progress: true,
-    host: '0.0.0.0',
-    stats: 'errors-only'
-  },
   resolve: {
     extensions: ['.js', '.ts', '.tsx', '.vue', '.less']
   },
@@ -69,19 +53,5 @@ module.exports = {
       }
     ]
   },
-  plugins: [
-    new VueLoaderPlugin(),
-    new HtmlWebpackPlugin({
-      chunks: ['vant-docs'],
-      template: path.join(__dirname, '../docs/site/desktop/index.html'),
-      filename: 'index.html',
-      inject: true
-    }),
-    new HtmlWebpackPlugin({
-      chunks: ['vant-mobile'],
-      template: path.join(__dirname, '../docs/site/mobile/index.html'),
-      filename: 'mobile.html',
-      inject: true
-    })
-  ]
+  plugins: [new VueLoaderPlugin()]
 };

build/webpack.pkg.js

@@ -1,9 +1,10 @@
 const path = require('path');
-const config = require('./webpack.dev.js');
+const merge = require('webpack-merge');
+const config = require('./webpack.base');
 
 const isMinify = process.argv.indexOf('-p') !== -1;
 
-module.exports = Object.assign(config, {
+module.exports = merge(config, {
   mode: 'production',
   entry: {
     vant: './es/index.js'

build/webpack.site.dev.js

@@ -0,0 +1,46 @@
+const path = require('path');
+const merge = require('webpack-merge');
+const config = require('./webpack.base');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = merge(config, {
+  entry: {
+    'vant-docs': './docs/site/desktop/main.js',
+    'vant-mobile': './docs/site/mobile/main.js'
+  },
+  devServer: {
+    open: true,
+    progress: true,
+    host: '0.0.0.0',
+    stats: 'errors-only'
+  },
+  output: {
+    path: path.join(__dirname, '../docs/dist'),
+    publicPath: '/',
+    chunkFilename: 'async_[name].js'
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        chunks: {
+          chunks: 'all',
+          minChunks: 2,
+          minSize: 0,
+          name: 'chunks'
+        }
+      }
+    }
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      chunks: ['chunks', 'vant-docs'],
+      template: path.join(__dirname, '../docs/site/desktop/index.html'),
+      filename: 'index.html'
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['chunks', 'vant-mobile'],
+      template: path.join(__dirname, '../docs/site/mobile/index.html'),
+      filename: 'mobile.html'
+    })
+  ]
+});

build/webpack.site.prd.js

@@ -1,7 +1,8 @@
 const path = require('path');
-const config = require('./webpack.dev.js');
+const merge = require('webpack-merge');
+const config = require('./webpack.site.dev');
 
-module.exports = Object.assign(config, {
+module.exports = merge(config, {
   mode: 'production',
   output: {
     path: path.join(__dirname, '../docs/dist'),