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> <body>
<div id="root" class="root-app"> <div id="root" class="root-app">
</div> </div>
<script src="/dist/bundle.js"></script> <script src="/dist/vendor.js"></script>
<script src="/dist/app.js"></script>
</body> </body>
</html> </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-register');
require('babel-polyfill'); require('babel-polyfill');
require('dotenv').config(); require('dotenv').config();

4
package.json
View file

@ -30,6 +30,7 @@
"babel-preset-react-optimize": "^1.0.1", "babel-preset-react-optimize": "^1.0.1",
"babel-preset-stage-0": "^6.5.0", "babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.8.0", "babel-register": "^6.8.0",
"chunk-manifest-webpack-plugin": "^0.1.0",
"css-loader": "^0.23.1", "css-loader": "^0.23.1",
"cssnano": "^3.7.1", "cssnano": "^3.7.1",
"eslint": "^2.13.1", "eslint": "^2.13.1",
@ -52,7 +53,8 @@
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
"webpack": "^1.13.0", "webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1", "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": { "engines": {
"node": ">=4" "node": ">=4"

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

@ -1,48 +1,49 @@
import { Router } from 'express'; import { Router } from 'express';
const router = new Router(); const router = new Router();
import path from 'path'; import path from 'path';
import { renderIndex } from '../views/index'
// this is intended to be a temporary file // this is intended to be a temporary file
// until i figure out isomorphic rendering // until i figure out isomorphic rendering
router.route('/').get((req, res) => { router.route('/').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`)); res.send(renderIndex());
}); });
router.route('/signup').get((req, res) => { router.route('/signup').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`)); res.send(renderIndex());
}); });
router.route('/projects/:project_id').get((req, res) => { 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) => { // router.route('/full/:project_id').get((req, res) => {
// res.sendFile(path.resolve(`${__dirname}/../../index.html`)); // res.send(renderIndex());
// }); // });
router.route('/login').get((req, res) => { router.route('/login').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`)); res.send(renderIndex());
}); });
router.route('/reset-password').get((req, res) => { 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) => { 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) => { router.route('/sketches').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`)); res.send(renderIndex());
}); });
router.route('/about').get((req, res) => { router.route('/about').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`)); res.send(renderIndex());
}); });
router.route('/:username/sketches').get((req, res) => { router.route('/:username/sketches').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`)); res.send(renderIndex());
}); });
export default router; 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 serverRoutes from './routes/server.routes';
import embedRoutes from './routes/embed.routes'; import embedRoutes from './routes/embed.routes';
import { renderIndex } from './views/index';
// Body parser, cookie parser, sessions, serve public assets // Body parser, cookie parser, sessions, serve public assets
app.use(Express.static(path.resolve(__dirname, '../static'))); app.use(Express.static(path.resolve(__dirname, '../static')));
@ -83,7 +85,7 @@ mongoose.connection.on('error', () => {
}); });
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.sendFile(path.resolve(`${__dirname}/../index.html`)); res.sendFile(renderIndex());
}); });
// start app // 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>
`;
}

22
webpack.config.dev.js
View file

@ -3,19 +3,35 @@ require('dotenv').config();
module.exports = { module.exports = {
devtool: 'cheap-module-eval-source-map', devtool: 'cheap-module-eval-source-map',
entry: ['babel-polyfill', 'webpack-hot-middleware/client', entry: {
app: ['babel-polyfill',
'webpack-hot-middleware/client',
'./client/index.js', './client/index.js',
], ],
vendor: [
'react',
'react-dom'
]
},
output: { output: {
path: __dirname + '/dist/', path: __dirname + '/dist/',
filename: 'bundle.js', filename: 'app.js',
publicPath: '/dist/' publicPath: '/dist/'
}, },
resolve: { resolve: {
extensions: ['', '.js', '.jsx'], extensions: ['', '.js', '.jsx'],
modules: [
'client',
'node_modules',
]
}, },
plugins: [ plugins: [
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
filename: 'vendor.js',
}),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
CLIENT: JSON.stringify(true), CLIENT: JSON.stringify(true),

38
webpack.config.prod.js
View file

@ -1,5 +1,7 @@
var webpack = require('webpack'); var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 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 cssnext = require('postcss-cssnext');
var postcssFocus = require('postcss-focus'); var postcssFocus = require('postcss-focus');
var postcssReporter = require('postcss-reporter'); var postcssReporter = require('postcss-reporter');
@ -9,19 +11,28 @@ require('dotenv').config();
module.exports = { module.exports = {
devtool: 'hidden-source-map', devtool: 'hidden-source-map',
entry: [ entry: {
'babel-polyfill', app: [
'./client/index.js' 'babel-polyfill',
], './client/index.js'
],
vendor: [
'react',
'react-dom'
]
},
output: { output: {
path: __dirname + '/static/dist', path: __dirname + '/static/dist',
filename: 'bundle.js', filename: '[name].[chunkhash].js',
publicPath: '/dist/' publicPath: '/dist/'
}, },
resolve: { resolve: {
extensions: ['', '.js', '.jsx'], extensions: ['', '.js', '.jsx'],
modules: [
'client',
'node_modules',
]
}, },
module: { module: {
@ -29,7 +40,7 @@ module.exports = {
{ {
test: /\.scss$/, test: /\.scss$/,
exclude: /node_modules/, exclude: /node_modules/,
loaders: ['style', 'css', 'sass', 'postcss'] loader: ExtractTextPlugin.extract('style', 'css!sass!postcss')
}, },
{ {
test: /\.jsx?$/, test: /\.jsx?$/,
@ -54,6 +65,19 @@ module.exports = {
'S3_BUCKET': '"' + process.env.S3_BUCKET + '"' '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({ new webpack.optimize.UglifyJsPlugin({
compress: { compress: {
warnings: false warnings: false