vue

frontend/config/webpack.config.prod.js

@@ -7,6 +7,7 @@ const OptimizeCSSAssetsPlugin  = require('optimize-css-assets-webpack-plugin');
 const MiniCSSExtractPlugin     = require('mini-css-extract-plugin');
 const UglifyJSPlugin           = require('uglifyjs-webpack-plugin');
 const CompressionPlugin        = require('compression-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const helpers                  = require('./helpers');
 const commonConfig             = require('./webpack.config.common');
 const isProd                   = process.env.NODE_ENV === 'production';
@@ -17,12 +18,13 @@ const webpackConfig = merge(commonConfig, {
     mode: 'production',
     output: {
         path: helpers.root('dist'),
-        publicPath: '/',
-        filename: `js/[name].js`,
-        chunkFilename: 'js/[name].js'
+        publicPath: '',
+        filename: 'js/bundle.js',
+        chunkFilename: 'js/[name].chunk.js',
     },
     optimization: {
         runtimeChunk: 'single',
+        minimize: true,
         minimizer: [
             new OptimizeCSSAssetsPlugin({
                 cssProcessorPluginOptions: {
@@ -42,10 +44,9 @@ const webpackConfig = merge(commonConfig, {
             cacheGroups: {
                 vendor: {
                     test: /[\\/]node_modules[\\/]/,
-                    name (module) {
-                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
-                        return `${packageName.replace('@', '')}`;
-                    }
+                    chunks: "all",
+                    name: "vendor",
+                    enforce: true
                 },
                 styles: {
                     test: /\.css$/,
@@ -58,6 +59,7 @@ const webpackConfig = merge(commonConfig, {
     },
     plugins: [
         new webpack.EnvironmentPlugin(environment),
+        new CleanWebpackPlugin(),
         new MiniCSSExtractPlugin({
             filename: 'css/[name].css',
             chunkFilename: 'css/[name].css'

frontend/package.json

@@ -45,6 +45,7 @@
     "@vue/test-utils": "^1.0.0-beta.31",
     "babel-eslint": "~10.0",
     "babel-loader": "~8.0",
+    "clean-webpack-plugin": "^3.0.0",
     "compression-webpack-plugin": "~2.0",
     "cross-env": "~5.2",
     "css-loader": "~2.1",

frontend/public/base.gohtml

@@ -16,9 +16,9 @@
     {{else}}
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
     {{if USING_ASSETS}}
-    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link href="css/vendor.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
     <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="font/all.css">
     {{else}}
     <% _.each(htmlWebpackPlugin.tags.headTags, function(headTag) { %>
     <%= headTag %> <% }) %>
@@ -33,7 +33,11 @@
 <div id="app"></div>
 
 {{if USE_CDN}}
-
+<script src="https://assets.statping.com/js/bundle.js"></script>
+<script src="https://assets.statping.com/js/vendor.chunk.js"></script>
+<script src="https://assets.statping.com/js/polyfill.chunk.js"></script>
+<script src="https://assets.statping.com/js/style.chunk.js"></script>
+<script src="https://assets.statping.com/js/main.chunk.js"></script>
 {{else}}
 <% _.each(htmlWebpackPlugin.tags.bodyTags, function(bodyTag) { %>
 <%= bodyTag %> <% }) %>

handlers/routes.go

@@ -61,7 +61,7 @@ func Router() *mux.Router {
 
 		r.PathPrefix("/css/").Handler(Gzip(staticAssets("css")))
 		r.PathPrefix("/font/").Handler(staticAssets("font"))
-		r.PathPrefix("/js/").Handler(Gzip(staticAssets("css")))
+		r.PathPrefix("/js/").Handler(Gzip(staticAssets("js")))
 		r.PathPrefix("/robots.txt").Handler(http.StripPrefix(basePath, indexHandler))
 		r.PathPrefix("/favicon.ico").Handler(http.StripPrefix(basePath, indexHandler))
 		r.PathPrefix("/banner.png").Handler(http.StripPrefix(basePath, indexHandler))
@@ -119,16 +119,18 @@ func Router() *mux.Router {
 	api.Handle("/api/services/{id}", scoped(apiServiceHandler)).Methods("GET")
 	api.Handle("/api/reorder/services", authenticated(reorderServiceHandler, false)).Methods("POST")
 	api.Handle("/api/services/{id}/running", authenticated(apiServiceRunningHandler, false)).Methods("POST")
-	api.Handle("/api/services/{id}/data", cached("30s", "application/json", apiServiceDataHandler)).Methods("GET")
-	api.Handle("/api/services/{id}/failure_data", cached("30s", "application/json", apiServiceFailureDataHandler)).Methods("GET")
-	api.Handle("/api/services/{id}/ping", cached("30s", "application/json", apiServicePingDataHandler)).Methods("GET")
-	api.Handle("/api/services/{id}/heatmap", cached("30s", "application/json", apiServiceHeatmapHandler)).Methods("GET")
 	api.Handle("/api/services/{id}", authenticated(apiServiceUpdateHandler, false)).Methods("POST")
 	api.Handle("/api/services/{id}", authenticated(apiServiceDeleteHandler, false)).Methods("DELETE")
 	api.Handle("/api/services/{id}/failures", scoped(apiServiceFailuresHandler)).Methods("GET")
 	api.Handle("/api/services/{id}/failures", authenticated(servicesDeleteFailuresHandler, false)).Methods("DELETE")
 	api.Handle("/api/services/{id}/hits", scoped(apiServiceHitsHandler)).Methods("GET")
 
+	// API SERVICE CHART DATA Routes
+	api.Handle("/api/services/{id}/data", cached("30s", "application/json", apiServiceDataHandler)).Methods("GET")
+	api.Handle("/api/services/{id}/failure_data", cached("30s", "application/json", apiServiceFailureDataHandler)).Methods("GET")
+	api.Handle("/api/services/{id}/ping", cached("30s", "application/json", apiServicePingDataHandler)).Methods("GET")
+	api.Handle("/api/services/{id}/heatmap", cached("30s", "application/json", apiServiceHeatmapHandler)).Methods("GET")
+
 	// API INCIDENTS Routes
 	api.Handle("/api/incidents", readOnly(apiAllIncidentsHandler, false)).Methods("GET")
 	api.Handle("/api/incidents", authenticated(apiCreateIncidentHandler, false)).Methods("POST")