From 8efd7f037812bf36b7dbb2033a2ddca0dc278af5 Mon Sep 17 00:00:00 2001
From: pypy <git@pypy.moe>
Date: Fri, 13 Aug 2021 02:58:42 +0900
Subject: [PATCH] refactor: vendor code splitting

---
 html/src/index.pug     |   1 +
 html/webpack.config.js | 248 +++++++++++++++++++++--------------------
 2 files changed, 128 insertions(+), 121 deletions(-)

diff --git a/html/src/index.pug b/html/src/index.pug
index 169f055b..6e1ad9b1 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -2650,4 +2650,5 @@ html
                         type="primary" size="small" @click="setPrimaryPassword"
                         :disabled="enablePrimaryPasswordDialog.password.length===0||enablePrimaryPasswordDialog.password!==enablePrimaryPasswordDialog.rePassword"
                     ) OK
+        script(src="vendor.js")
         script(src="app.js")
diff --git a/html/webpack.config.js b/html/webpack.config.js
index de432c03..51ab2c43 100644
--- a/html/webpack.config.js
+++ b/html/webpack.config.js
@@ -5,127 +5,133 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
-    entry: {
-        app: [
-            './src/app.js',
-            './src/app.scss'
-        ],
-        'app.dark': './src/app.dark.scss',
-        vr: [
-            './src/vr.js',
-            './src/vr.scss'
-        ]
-    },
-    output: {
-        filename: '[name].js',
-        library: {
-            type: 'window'
-        }
-    },
-    module: {
-        rules: [
-            {
-                test: /\.pug$/,
-                oneOf: [
-                    {
-                        resourceQuery: /^\?vue/,
-                        use: 'pug-plain-loader'
-                    },
-                    {
-                        use: ['raw-loader', 'pug-plain-loader']
-                    }
-                ]
-            },
-            {
-                test: /\.s?css$/,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
-            },
-            {
-                test: /\.(eot|png|svg|ttf|woff)/,
-                type: 'asset',
-                generator: {
-                    filename: 'assets/[name][ext]'
-                }
-            }
-        ]
-    },
-    resolve: {
-        extensions: ['.css', '.js', '.scss'],
-        alias: {
-            vue: path.join(
-                __dirname,
-                './node_modules/vue/dist/vue.common.prod.js'
-            )
-        }
-    },
-    performance: {
-        hints: false
-    },
-    devtool: 'inline-source-map',
-    target: ['web', 'es2020'],
-    stats: {
-        preset: 'errors-only',
-        builtAt: true,
-        timings: true
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: '[name].css'
-        }),
-        new HtmlWebpackPlugin({
-            filename: 'index.html',
-            template: './src/index.pug',
-            inject: false,
-            minify: false
-        }),
-        new HtmlWebpackPlugin({
-            filename: 'vr.html',
-            template: './src/vr.pug',
-            inject: false,
-            minify: false
-        }),
-        new CopyPlugin({
-            patterns: [
-                // assets
-                {
-                    from: './images/',
-                    to: './images/'
-                },
-                // // vscode-codicons
-                // {
-                //     from: './node_modules/vscode-codicons/dist/codicon.css',
-                //     to: 'vendor/vscode-codicons/'
-                // },
-                // {
-                //     from: './node_modules/vscode-codicons/dist/codicon.ttf',
-                //     to: 'vendor/vscode-codicons/'
-                // },
-                // // fontawesome
-                // {
-                //     from: './node_modules/@fortawesome/fontawesome-free/webfonts/',
-                //     to: 'vendor/fontawesome/webfonts/'
-                // },
-                // {
-                //     from: './node_modules/@fortawesome/fontawesome-free/css/all.min.css',
-                //     to: 'vendor/fontawesome/css/'
-                // },
-                // // element-plus
-                // {
-                //     from: './node_modules/element-plus/lib/theme-chalk/fonts/',
-                //     to: 'vendor/element-plus/lib/theme-chalk/fonts/'
-                // },
-                // {
-                //     from: './node_modules/element-plus/lib/theme-chalk/index.css',
-                //     to: 'vendor/element-plus/lib/theme-chalk/'
-                // }
-            ]
-        })
+  entry: {
+    vendor: [
+      'element-ui',
+      'noty',
+      'vue',
+      'vue-data-tables',
+      'vue-lazyload',
+      'vue-swatches',
+      'uuid'
     ],
-    optimization: {
-        minimizer: [
-            new TerserPlugin({
-                extractComments: false
-            })
-        ]
+    app: {
+      import: ['./src/app.js', './src/app.scss'],
+      dependOn: 'vendor'
+    },
+    'app.dark': './src/app.dark.scss',
+    vr: {
+      import: ['./src/vr.js', './src/vr.scss'],
+      dependOn: 'vendor'
     }
+  },
+  output: {
+    filename: '[name].js',
+    library: {
+      type: 'window'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.pug$/,
+        oneOf: [
+          {
+            resourceQuery: /^\?vue/,
+            use: 'pug-plain-loader'
+          },
+          {
+            use: ['raw-loader', 'pug-plain-loader']
+          }
+        ]
+      },
+      {
+        test: /\.s?css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.(eot|png|svg|ttf|woff)/,
+        type: 'asset',
+        generator: {
+          filename: 'assets/[name][ext]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.css', '.js', '.scss'],
+    alias: {
+      vue: path.join(__dirname, './node_modules/vue/dist/vue.common.prod.js')
+    }
+  },
+  performance: {
+    hints: false
+  },
+  devtool: 'inline-source-map',
+  target: ['web', 'es2020'],
+  stats: {
+    preset: 'errors-only',
+    builtAt: true,
+    timings: true
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: './src/index.pug',
+      inject: false,
+      minify: false
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'vr.html',
+      template: './src/vr.pug',
+      inject: false,
+      minify: false
+    }),
+    new CopyPlugin({
+      patterns: [
+        // assets
+        {
+          from: './images/',
+          to: './images/'
+        }
+        // // vscode-codicons
+        // {
+        //     from: './node_modules/vscode-codicons/dist/codicon.css',
+        //     to: 'vendor/vscode-codicons/'
+        // },
+        // {
+        //     from: './node_modules/vscode-codicons/dist/codicon.ttf',
+        //     to: 'vendor/vscode-codicons/'
+        // },
+        // // fontawesome
+        // {
+        //     from: './node_modules/@fortawesome/fontawesome-free/webfonts/',
+        //     to: 'vendor/fontawesome/webfonts/'
+        // },
+        // {
+        //     from: './node_modules/@fortawesome/fontawesome-free/css/all.min.css',
+        //     to: 'vendor/fontawesome/css/'
+        // },
+        // // element-plus
+        // {
+        //     from: './node_modules/element-plus/lib/theme-chalk/fonts/',
+        //     to: 'vendor/element-plus/lib/theme-chalk/fonts/'
+        // },
+        // {
+        //     from: './node_modules/element-plus/lib/theme-chalk/index.css',
+        //     to: 'vendor/element-plus/lib/theme-chalk/'
+        // }
+      ]
+    })
+  ],
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false
+      })
+    ]
+  }
 };