From f40ecebfba1f0e11137aa31252e673c33b6c0cb3 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 8 Nov 2016 18:11:12 -0500 Subject: [PATCH] #142 add webpack configuration to decrease loading speed --- index.html | 3 ++- index.js | 4 ++++ package.json | 4 +++- server/routes/server.routes.js | 21 ++++++++++--------- server/server.js | 4 +++- server/views/index.js | 28 +++++++++++++++++++++++++ webpack.config.dev.js | 22 +++++++++++++++++--- webpack.config.prod.js | 38 +++++++++++++++++++++++++++------- 8 files changed, 101 insertions(+), 23 deletions(-) create mode 100644 server/views/index.js diff --git a/index.html b/index.html index de2e4106..8fbe6c9d 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@
- + + diff --git a/index.js b/index.js index e7fd2dc8..6d5ed22e 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,7 @@ +if (process.env.NODE_ENV === 'production') { + process.env.webpackAssets = JSON.stringify(require('./static/dist/manifest.json')); + process.env.webpackChunkAssets = JSON.stringify(require('./static/dist/chunk-manifest.json')); +} require('babel-register'); require('babel-polyfill'); require('dotenv').config(); diff --git a/package.json b/package.json index 8f676f2b..9f14fed7 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "babel-preset-react-optimize": "^1.0.1", "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.8.0", + "chunk-manifest-webpack-plugin": "^0.1.0", "css-loader": "^0.23.1", "cssnano": "^3.7.1", "eslint": "^2.13.1", @@ -52,7 +53,8 @@ "style-loader": "^0.13.1", "webpack": "^1.13.0", "webpack-dev-middleware": "^1.6.1", - "webpack-hot-middleware": "^2.10.0" + "webpack-hot-middleware": "^2.10.0", + "webpack-manifest-plugin": "^1.1.0" }, "engines": { "node": ">=4" diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js index 53914ed4..c9884a60 100644 --- a/server/routes/server.routes.js +++ b/server/routes/server.routes.js @@ -1,48 +1,49 @@ import { Router } from 'express'; const router = new Router(); import path from 'path'; +import { renderIndex } from '../views/index' // this is intended to be a temporary file // until i figure out isomorphic rendering router.route('/').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); router.route('/signup').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); router.route('/projects/:project_id').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); // router.route('/full/:project_id').get((req, res) => { -// res.sendFile(path.resolve(`${__dirname}/../../index.html`)); +// res.send(renderIndex()); // }); router.route('/login').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); router.route('/reset-password').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); router.route('/reset-password/:reset_password_token').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); router.route('/sketches').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); router.route('/about').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); router.route('/:username/sketches').get((req, res) => { - res.sendFile(path.resolve(`${__dirname}/../../index.html`)); + res.send(renderIndex()); }); export default router; diff --git a/server/server.js b/server/server.js index 12900566..20fde5d2 100644 --- a/server/server.js +++ b/server/server.js @@ -32,6 +32,8 @@ import aws from './routes/aws.routes'; import serverRoutes from './routes/server.routes'; import embedRoutes from './routes/embed.routes'; +import { renderIndex } from './views/index'; + // Body parser, cookie parser, sessions, serve public assets app.use(Express.static(path.resolve(__dirname, '../static'))); @@ -83,7 +85,7 @@ mongoose.connection.on('error', () => { }); app.get('/', (req, res) => { - res.sendFile(path.resolve(`${__dirname}/../index.html`)); + res.sendFile(renderIndex()); }); // start app diff --git a/server/views/index.js b/server/views/index.js new file mode 100644 index 00000000..164cee46 --- /dev/null +++ b/server/views/index.js @@ -0,0 +1,28 @@ +export function renderIndex() { + const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets); + const chunkManifest = process.env.webpackChunkAssets && JSON.parse(process.env.webpackChunkAssets); + + return ` + + + + p5.js Web Editor + ${process.env.NODE_ENV === 'production' ? `` : ''} + + + + +
+
+ + + + + + `; +} \ No newline at end of file diff --git a/webpack.config.dev.js b/webpack.config.dev.js index b42a86a3..6f79bbf7 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -3,19 +3,35 @@ require('dotenv').config(); module.exports = { devtool: 'cheap-module-eval-source-map', - entry: ['babel-polyfill', 'webpack-hot-middleware/client', + entry: { + app: ['babel-polyfill', + 'webpack-hot-middleware/client', './client/index.js', - ], + ], + vendor: [ + 'react', + 'react-dom' + ] + }, output: { path: __dirname + '/dist/', - filename: 'bundle.js', + filename: 'app.js', publicPath: '/dist/' }, resolve: { extensions: ['', '.js', '.jsx'], + modules: [ + 'client', + 'node_modules', + ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: Infinity, + filename: 'vendor.js', + }), new webpack.DefinePlugin({ 'process.env': { CLIENT: JSON.stringify(true), diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 8af60a74..f0d41126 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -1,5 +1,7 @@ var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var ManifestPlugin = require('webpack-manifest-plugin'); +var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin'); var cssnext = require('postcss-cssnext'); var postcssFocus = require('postcss-focus'); var postcssReporter = require('postcss-reporter'); @@ -9,19 +11,28 @@ require('dotenv').config(); module.exports = { devtool: 'hidden-source-map', - entry: [ - 'babel-polyfill', - './client/index.js' - ], - + entry: { + app: [ + 'babel-polyfill', + './client/index.js' + ], + vendor: [ + 'react', + 'react-dom' + ] + }, output: { path: __dirname + '/static/dist', - filename: 'bundle.js', + filename: '[name].[chunkhash].js', publicPath: '/dist/' }, resolve: { extensions: ['', '.js', '.jsx'], + modules: [ + 'client', + 'node_modules', + ] }, module: { @@ -29,7 +40,7 @@ module.exports = { { test: /\.scss$/, exclude: /node_modules/, - loaders: ['style', 'css', 'sass', 'postcss'] + loader: ExtractTextPlugin.extract('style', 'css!sass!postcss') }, { test: /\.jsx?$/, @@ -54,6 +65,19 @@ module.exports = { 'S3_BUCKET': '"' + process.env.S3_BUCKET + '"' } }), + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: Infinity, + filename: 'vendor.js', + }), + new ExtractTextPlugin('app.[chunkhash].css', { allChunks: true }), + new ManifestPlugin({ + basePath: '/', + }), + new ChunkManifestPlugin({ + filename: "chunk-manifest.json", + manifestVariable: "webpackManifest", + }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false