项目优化

build/webpack.prod.conf.js

@@ -12,6 +12,8 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const CompressionPlugin = require('compression-webpack-plugin');
+const productionGzipExtensions = ['js', 'css']
 
 const env = require('../config/prod.env')
 
@@ -57,6 +59,12 @@ const webpackConfig = merge(baseWebpackConfig, {
             sourceMap: config.build.productionSourceMap,
             parallel: true
         }),
+		new CompressionPlugin({
+			algorithm: 'gzip',
+			test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+			threshold: 10240,
+			minRatio: 0.8
+		}),
         // extract css into its own file
         new ExtractTextPlugin({
             filename: utils.assetsPath('css/[name].[contenthash].css'),

package-lock.json

@@ -2515,6 +2515,19 @@
         }
       }
     },
+    "compression-webpack-plugin": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-1.1.12.tgz",
+      "integrity": "sha512-UpBXSHbrCSdSZieAffqXlAQpLO2fikVVRYibrWlbHYzKpOw1Y4jwkVZ/+S91GzWuJvXSbc8SBy/e8fQJh8uEMQ==",
+      "dev": true,
+      "requires": {
+        "cacache": "^10.0.1",
+        "find-cache-dir": "^1.0.0",
+        "neo-async": "^2.5.0",
+        "serialize-javascript": "^1.4.0",
+        "webpack-sources": "^1.0.1"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",

package.json

@@ -55,6 +55,7 @@
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
+    "compression-webpack-plugin": "^1.1.12",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.11",
     "d3": "^7.3.0",

src/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title id="appTitle">Vgncoin</title>
-    <link rel="icon" id="appIcon" href="/static/favicon.ico" type="image/x-icon">
+    <link rel="icon" id="appIcon" href="./static/favicon.ico" type="image/x-icon">
     <style>
         #MICHAT-MINI-WRAP{
             margin-bottom: -19px;
@@ -37,19 +37,19 @@
         htmlWebpackPlugin模板支持ejs语法 -->
 
     <!-- 加载bootstrap样式文件 -->
-    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
 
     <!-- 加载ionicons样式文件 -->
-    <link rel="stylesheet" href="/static/css/ionicons.min.css">
+    <link rel="stylesheet" href="./static/css/ionicons.min.css">
 
     <!-- 加载jquery样式文件 -->
-    <link rel="stylesheet" href="/static/css/jquery.mCustomScrollbar.min.css">
+    <link rel="stylesheet" href="./static/css/jquery.mCustomScrollbar.min.css">
 
-    <script src="/static/Kline/charting_library/charting_library.min.js"></script>
+    <script src="./static/Kline/charting_library/charting_library.min.js"></script>
 
     <!-- 加载swiper -->
-    <link rel="stylesheet" href="/static/libs/swiper-5.3.8/package/css/swiper.min.css">
-    <script src="/static/libs/swiper-5.3.8/package/js/swiper.min.js"></script>
+    <link rel="stylesheet" href="./static/libs/swiper-5.3.8/package/css/swiper.min.css">
+    <script src="./static/libs/swiper-5.3.8/package/js/swiper.min.js"></script>
 </head>
 <style>
     body{
@@ -60,14 +60,14 @@
 
     <entry id="app"></entry>
 
-    <script src="/static/libs/jquery-3.4.1.min.js"></script>
-    <script src="/static/libs/popper.min.js"></script>
-    <script src="/static/libs/bootstrap.min.js"></script>
-    <script src="/static/libs/amcharts-core.min.js"></script>
-    <script src="/static/libs/amcharts.min.js"></script>
-    <script src="/static/libs/jquery.mCustomScrollbar.js"></script>
-    <script src="/static/js/custom.js"></script>
-    <script src="/static/libs/skroll.min.js"></script>
+    <script src="./static/libs/jquery-3.4.1.min.js"></script>
+    <script src="./static/libs/popper.min.js"></script>
+    <script src="./static/libs/bootstrap.min.js"></script>
+    <script src="./static/libs/amcharts-core.min.js"></script>
+    <script src="./static/libs/amcharts.min.js"></script>
+    <script src="./static/libs/jquery.mCustomScrollbar.js"></script>
+    <script src="./static/js/custom.js"></script>
+    <script src="./static/libs/skroll.min.js"></script>
     <script src="https://seee.vgncoin.com/newlink/pako.min.js"></script>
     <script>
         window.custom = "dark"; // 默认主题