chore: add size-limit

Author: posva

package.json

@@ -23,6 +23,7 @@
     "build:playground": "webpack --env.prod",
     "build:e2e": "webpack --env.prod --config e2e/webpack.config.js",
     "dev:e2e": "webpack-dev-server --mode=development --config e2e/webpack.config.js",
+    "size": "size-limit",
     "lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
     "lint:fix": "yarn run lint --write",
     "test:types": "tsc --build tsconfig.json",
@@ -43,6 +44,11 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "size-limit": [
+    {
+      "path": "size-checks/appWithWebRouter.js"
+    }
+  ],
   "peerDependencies": {
     "vue": "^3.0.0-beta.3"
   },
@@ -53,6 +59,7 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
+    "@size-limit/preset-small-lib": "^4.4.5",
     "@types/jest": "^25.1.3",
     "@types/jsdom": "^16.2.1",
     "@types/webpack": "^4.41.12",
@@ -79,6 +86,7 @@
     "rollup-plugin-typescript2": "^0.27.0",
     "selenium-server": "^3.141.59",
     "serve-handler": "^6.1.2",
+    "size-limit": "^4.4.5",
     "style-loader": "^1.2.0",
     "ts-jest": "^25.4.0",
     "ts-loader": "^7.0.1",
@@ -87,6 +95,7 @@
     "vue": "^3.0.0-beta.3",
     "vue-loader": "^16.0.0-alpha.3",
     "webpack": "^4.43.0",
+    "webpack-bundle-analyzer": "^3.7.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
     "yorkie": "^2.0.0"

size-checks/appWithWebRouter.js

@@ -0,0 +1,12 @@
+import { h, createApp } from '@vue/runtime-dom'
+import { createRouter, createWebHistory } from './dist/src'
+
+createRouter({
+  history: createWebHistory(),
+  routes: [],
+})
+
+// The bare minimum code required for rendering something to the screen
+createApp({
+  render: () => h('div', 'hello world!'),
+}).mount('#app')

webpack.config.js

@@ -1,65 +1,71 @@
 const { resolve } = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const { VueLoaderPlugin } = require('vue-loader')
 const webpack = require('webpack')
 
 const outputPath = resolve(__dirname, 'playground_dist')
 
 /** @type {import('webpack').ConfigurationFactory} */
-const config = (env = {}) => ({
-  mode: env.prod ? 'production' : 'development',
-  devtool: env.prod ? 'source-map' : 'inline-source-map',
+const config = (env = {}) => {
+  const extraPlugins = env.prod ? [new BundleAnalyzerPlugin()] : []
 
-  devServer: {
-    contentBase: outputPath,
-    historyApiFallback: true,
-    hot: true,
-    stats: 'minimal',
-  },
+  return {
+    mode: env.prod ? 'production' : 'development',
+    devtool: env.prod ? 'source-map' : 'inline-source-map',
 
-  output: {
-    path: outputPath,
-    publicPath: '/',
-    filename: 'bundle.js',
-  },
+    devServer: {
+      contentBase: outputPath,
+      historyApiFallback: true,
+      hot: true,
+      stats: 'minimal',
+    },
 
-  entry: [resolve(__dirname, 'playground/main.ts')],
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: 'ts-loader',
-      },
-      {
-        test: /\.vue$/,
-        use: 'vue-loader',
-      },
-    ],
-  },
-  resolve: {
-    alias: {
-      // this isn't technically needed, since the default `vue` entry for bundlers
-      // is a simple `export * from '@vue/runtime-dom`. However having this
-      // extra re-export somehow causes webpack to always invalidate the module
-      // on the first HMR update and causes the page to reload.
-      vue: '@vue/runtime-dom',
+    output: {
+      path: outputPath,
+      publicPath: '/',
+      filename: 'bundle.js',
     },
-    // Add `.ts` and `.tsx` as a resolvable extension.
-    extensions: ['.ts', 'd.ts', '.tsx', '.js', '.vue'],
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new HtmlWebpackPlugin({
-      template: resolve(__dirname, 'playground/index.html'),
-    }),
-    new webpack.DefinePlugin({
-      __DEV__: JSON.stringify(!env.prod),
-      __BROWSER__: 'true',
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+
+    entry: [resolve(__dirname, 'playground/main.ts')],
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          use: 'ts-loader',
+        },
+        {
+          test: /\.vue$/,
+          use: 'vue-loader',
+        },
+      ],
+    },
+    resolve: {
+      alias: {
+        // this isn't technically needed, since the default `vue` entry for bundlers
+        // is a simple `export * from '@vue/runtime-dom`. However having this
+        // extra re-export somehow causes webpack to always invalidate the module
+        // on the first HMR update and causes the page to reload.
+        vue: '@vue/runtime-dom',
       },
-    }),
-  ],
-})
+      // Add `.ts` and `.tsx` as a resolvable extension.
+      extensions: ['.ts', 'd.ts', '.tsx', '.js', '.vue'],
+    },
+    plugins: [
+      new VueLoaderPlugin(),
+      new HtmlWebpackPlugin({
+        template: resolve(__dirname, 'playground/index.html'),
+      }),
+      new webpack.DefinePlugin({
+        __DEV__: JSON.stringify(!env.prod),
+        __BROWSER__: 'true',
+        'process.env': {
+          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        },
+      }),
+      ...extraPlugins,
+    ],
+  }
+}
 
 module.exports = config