r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

#142 add webpack configuration to decrease loading speed

Browse source
This commit is contained in:
Cassie Tarakajian 2016-11-08 18:11:12 -05:00
parent 2750b1f0ef
commit f40ecebfba
8 changed files with 101 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -8,6 +8,7 @@
<body>
<div id="root" class="root-app">
</div>
<script src="/dist/bundle.js"></script>
<script src="/dist/vendor.js"></script>
<script src="/dist/app.js"></script>
</body>
</html>

4
index.js
View file

@ -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();

4
package.json
View file

@ -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"

21
server/routes/server.routes.js
View file

@ -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;

4
server/server.js
View file

@ -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

28
server/views/index.js Normal file
View file

@ -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 `
<!DOCTYPE html>
<html>
<head>
<title>p5.js Web Editor</title>
${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='/dist/${assetsManifest['/app.css']}' />` : ''}
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="root" class="root-app">
</div>
<script>
${process.env.NODE_ENV === 'production' ?
`//<![CDATA[
window.webpackManifest = ${JSON.stringify(chunkManifest)};
//]]>` : ''}
</script>
<script src='${process.env.NODE_ENV === 'production' ? `/dist/${assetsManifest['/vendor.js']}` : '/dist/vendor.js'}'></script>
<script src='${process.env.NODE_ENV === 'production' ? `/dist/${assetsManifest['/app.js']}` : '/dist/app.js'}'></script>
</body>
</html>
`;
}

20
webpack.config.dev.js
View file

@ -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),

32
webpack.config.prod.js
View file

@ -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: [
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