update

Author: edenleung

package.json

@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@ant-design/colors": "^3.2.1",
+    "@gfx/zopfli": "^1.0.15",
     "@vue/cli-plugin-babel": "^4.0.4",
     "@vue/cli-plugin-eslint": "^4.0.4",
     "@vue/cli-plugin-router": "^4.0.4",
@@ -51,6 +52,8 @@
     "babel-eslint": "^10.0.1",
     "babel-plugin-import": "^1.12.2",
     "babel-plugin-transform-remove-console": "^6.9.4",
+    "brotli-webpack-plugin": "^1.1.0",
+    "compression-webpack-plugin": "^4.0.0",
     "eslint": "^5.16.0",
     "eslint-plugin-html": "^5.0.0",
     "eslint-plugin-vue": "^5.2.3",

src/config/componentConfigs.js

@@ -2,43 +2,43 @@ import { BasicLayout, UserLayout, RouteView, BlankLayout, PageView } from '@/lay
 
 export const Components = {
   // 基础页面 layout 必须引入
-  'Layout': {
+  Layout: {
     BasicLayout,
     UserLayout,
     RouteView,
     BlankLayout,
     PageView
   },
   // 普通页面
-  'Page': {
-    'Analysis': () => import('@/views/dashboard/Analysis'),
-    'Workplace': () => import('@/views/dashboard/Workplace'),
-    'Permission': () => import('@/views/system/permission/Index'),
-    'Role': () => import('@/views/system/role/Index'),
-    'Account': () => import('@/views/system/user/Index'),
-    'AccountForm': () => import('@/views/system/user/components/User'),
-    'Dept': () => import('@/views/system/dept/Index'),
-    'LogAccount': () => import('@/views/log/Index'),
-    'LogDb': () => import('@/views/log/Db'),
-    'WangEditor': () => import('@/views/editor/WangEditor'),
-    'Quill': () => import('@/views/editor/Quill'),
-    'Post': () => import('@/views/system/post/Index'),
-    'Center': () => import('@/views/account/center/Index'),
-    'Settings': () => import('@/views/account/settings/Index'),
-    'BaseSettings': () => import('@/views/account/settings/BaseSetting'),
-    'SecuritySettings': () => import('@/views/account/settings/Security'),
-    'CustomSettings': () => import('@/views/account/settings/Custom'),
-    'BindingSettings': () => import('@/views/account/settings/Binding'),
-    'NotificationSettings': () => import('@/views/account/settings/Notification'),
+  Page: {
+    Analysis: () => import(/* webpackChunkName: "Analysis" */ '@/views/dashboard/Analysis'),
+    Workplace: () => import(/* webpackChunkName: "Workplace" */ '@/views/dashboard/Workplace'),
+    Permission: () => import(/* webpackChunkName: "Permission" */ '@/views/system/permission/Index'),
+    Role: () => import(/* webpackChunkName: "Role" */ '@/views/system/role/Index'),
+    Account: () => import(/* webpackChunkName: "Account" */ '@/views/system/user/Index'),
+    AccountForm: () => import(/* webpackChunkName: "AccountForm" */ '@/views/system/user/components/User'),
+    Dept: () => import(/* webpackChunkName: "Dept" */ '@/views/system/dept/Index'),
+    LogAccount: () => import(/* webpackChunkName: "LogAccount" */ '@/views/log/Index'),
+    LogDb: () => import(/* webpackChunkName: "LogDb" */ '@/views/log/Db'),
+    WangEditor: () => import(/* webpackChunkName: "WangEditor" */ '@/views/editor/WangEditor'),
+    Quill: () => import(/* webpackChunkName: "Quill" */ '@/views/editor/Quill'),
+    Post: () => import(/* webpackChunkName: "Post" */ '@/views/system/post/Index'),
+    Center: () => import(/* webpackChunkName: "Center" */ '@/views/account/center/Index'),
+    Settings: () => import(/* webpackChunkName: "Settings" */ '@/views/account/settings/Index'),
+    BaseSettings: () => import(/* webpackChunkName: "BaseSettings" */ '@/views/account/settings/BaseSetting'),
+    SecuritySettings: () => import(/* webpackChunkName: "SecuritySettings" */ '@/views/account/settings/Security'),
+    CustomSettings: () => import(/* webpackChunkName: "CustomSettings" */ '@/views/account/settings/Custom'),
+    BindingSettings: () => import(/* webpackChunkName: "BindingSettings" */ '@/views/account/settings/Binding'),
+    NotificationSettings: () => import(/* webpackChunkName: "NotificationSettings" */ '@/views/account/settings/Notification'),
 
     // 权限测试
-    'TestNotAjax': () => import('@/views/test/NotAjax'),
-    'Form': () => import('@/views/test/Form'),
-    'CreateForm': () => import('@/views/test/components/CreateForm'),
+    TestNotAjax: () => import(/* webpackChunkName: "TestNotAjax" */ '@/views/test/NotAjax'),
+    Form: () => import(/* webpackChunkName: "Form" */ '@/views/test/Form'),
+    CreateForm: () => import(/* webpackChunkName: "CreateForm" */ '@/views/test/components/CreateForm'),
 
-    'Article': () => import('@/views/article/Index'),
-    'ArticleForm': () => import('@/views/article/components/Article'),
-    'ArticleCategory': () => import('@/views/article/Category'),
-    'ArticleCategoryForm': () => import('@/views/article/components/Category')
+    Article: () => import(/* webpackChunkName: "Article" */ '@/views/article/Index'),
+    ArticleForm: () => import(/* webpackChunkName: "ArticleForm" */ '@/views/article/components/Article'),
+    ArticleCategory: () => import(/* webpackChunkName: "ArticleCategory" */ '@/views/article/Category'),
+    ArticleCategoryForm: () => import(/* webpackChunkName: "ArticleCategoryForm" */ '@/views/article/components/Category')
   }
 }

src/core/antd/icons.js

@@ -91,3 +91,9 @@ export {
 export {
   default as CaretDownFill
 } from '@ant-design/icons/lib/fill/CaretDownFill'
+export {
+  default as SmileOutline
+} from '@ant-design/icons/lib/outline/SmileOutline'
+export {
+  default as PlusOutline
+} from '@ant-design/icons/lib/outline/PlusOutline'

vue.config.js

@@ -1,12 +1,14 @@
 const path = require('path')
 const webpack = require('webpack')
+const CompressionWebpackPlugin = require("compression-webpack-plugin")
+const zopfli = require("@gfx/zopfli")
+const BrotliPlugin = require("brotli-webpack-plugin")
 const createThemeColorReplacerPlugin = require('./config/plugin.config')
-
 function resolve (dir) {
   return path.join(__dirname, dir)
 }
 
-const isProd = process.env.NODE_ENV === 'production'
+const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
 
 const assetsCDN = {
   // webpack build externals
@@ -42,15 +44,30 @@ const vueConfig = {
     // webpack plugins
     plugins: [
       // Ignore all locale files of moment.js
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // Gzip
+      new CompressionWebpackPlugin({
+        algorithm(input, compressionOptions, callback) {
+          return zopfli.gzip(input, compressionOptions, callback);
+        },
+        compressionOptions: {
+          numiterations: 15
+        },
+        minRatio: 0.99,
+        test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
+      }),
+      new BrotliPlugin({
+        test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
+        minRatio: 0.99
+      })
     ],
     resolve: {
       alias: {
-        // '@ant-design/icons/lib/dist$': resolve('./src/core/antd/icons.js')
+        '@ant-design/icons/lib/dist$': resolve('./src/core/antd/icons.js')
       }
     },
     // if prod, add externals
-    externals: isProd ? assetsCDN.externals : {}
+    externals: IS_PROD ? assetsCDN.externals : {}
   },
 
   chainWebpack: (config) => {
@@ -75,18 +92,16 @@ const vueConfig = {
 
     // if prod is on
     // assets require on cdn
-    if (isProd) {
+    if (IS_PROD) {
       config.plugin('html').tap(args => {
         args[0].cdn = assetsCDN
         return args
       })
 
-      if (process.env.npm_config_report) {
-        config
-          .plugin('webpack-bundle-analyzer')
-          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
-          .end()
-      }
+      config
+        .plugin('webpack-bundle-analyzer')
+        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
+        .end()
     }
   },