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: [
+  plugins: [new VueLoaderPlugin()]
-    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
-    })
-  ]
 };

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'),

package.json

@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "bootstrap": "yarn || npm i",
-    "dev": "npm run build:entry && webpack-dev-server --config build/webpack.dev.js",
+    "dev": "npm run build:entry && webpack-dev-server --config build/webpack.site.dev.js",
     "lint": "eslint ./src --ext .js,.vue,.ts,.tsx && stylelint \"src/**/*.less\" --fix",
     "build:entry": "node build/build-entry.js",
     "build:changelog": "vant changelog ./docs/markdown/changelog.generated.md --tag v2.1.0",
@@ -112,7 +112,8 @@
     "vue-template-compiler": "2.6.10",
     "webpack": "4.39.1",
     "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "3.7.2"
+    "webpack-dev-server": "3.7.2",
+    "webpack-merge": "^4.2.2"
   },
   "sideEffects": [
     "es/**/style/*",

yarn.lock

@@ -10203,6 +10203,13 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
+webpack-merge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
+  dependencies:
+    lodash "^4.17.15"
+
 webpack-sources@^1.4.0, webpack-sources@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.1.tgz#b91b2c5b1c4e890ff50d1d35b7fa3657040da1da"