From 2c0dde8ca2579e12b0382e2766cec08805fed9b1 Mon Sep 17 00:00:00 2001
From: Sarah Seo <sarah.seo.0311@gmail.com>
Date: Tue, 3 Jan 2017 11:35:46 +0900
Subject: [PATCH] Optimize webpack configuration Add analyze script

---
 app/lib/main.html                   | 10 +++++++
 app/lib/main.production.html        |  8 +-----
 app/lib/preferences.html            | 11 +++++++-
 app/lib/preferences.production.html |  8 +-----
 package.json                        | 43 +++++++++++++++--------------
 src/lib/markdown.js                 |  2 --
 src/main/index.js                   | 18 +++---------
 src/preferences/index.js            | 18 +++---------
 webpack.config.js                   | 24 ++++++++++++----
 9 files changed, 72 insertions(+), 70 deletions(-)

diff --git a/app/lib/main.html b/app/lib/main.html
index 141e619bc..133a177e2 100644
--- a/app/lib/main.html
+++ b/app/lib/main.html
@@ -47,5 +47,15 @@
 
 <script type="text/javascript" src="http://localhost:8080/assets/main.js"></script>
 
+<script>
+window.electron = require('electron')
+window.remote = window.electron.remote
+
+const installExtension = require('electron-devtools-installer')
+installExtension.default(installExtension.REACT_DEVELOPER_TOOLS)
+  .then((name) => console.log(`Added Extension:  ${name}`))
+  .catch((err) => console.log('An error occurred: ', err))
+</script>
+
 </body>
 </html>
diff --git a/app/lib/main.production.html b/app/lib/main.production.html
index 96f18c2a2..a0acb3ac2 100644
--- a/app/lib/main.production.html
+++ b/app/lib/main.production.html
@@ -6,7 +6,7 @@
 
   <title>Inpad</title>
 
-  <link rel="stylesheet" type="text/css" href="../../node_modules/octicons/build/octicons.css">
+  <link rel="stylesheet" type="text/css" href="../../compiled/main.css">
   <link rel="stylesheet" type="text/css" href="../../node_modules/codemirror/lib/codemirror.css">
   <link rel="stylesheet" type="text/css" href="../../node_modules/codemirror/addon/dialog/dialog.css">
   <style>
@@ -39,12 +39,6 @@
 <script type="text/javascript" src="../../node_modules/codemirror/addon/search/jump-to-line.js"></script>
 <script type="text/javascript" src="../../node_modules/codemirror/addon/dialog/dialog.js"></script>
 
-<script type="text/javascript" src="../../node_modules/react/dist/react.min.js"></script>
-<script type="text/javascript" src="../../node_modules/react-dom/dist/react-dom.min.js"></script>
-<script type="text/javascript" src="../../node_modules/redux/dist/redux.min.js"></script>
-<script type="text/javascript" src="../../node_modules/react-redux/dist/react-redux.min.js"></script>
-<script type="text/javascript" src="../../node_modules/immutable/dist/immutable.min.js"></script>
-
 <script type="text/javascript" src="../../compiled/main.js"></script>
 
 </body>
diff --git a/app/lib/preferences.html b/app/lib/preferences.html
index 1a91deedd..2491d2523 100644
--- a/app/lib/preferences.html
+++ b/app/lib/preferences.html
@@ -6,7 +6,6 @@
 
   <title>Preferences - Inpad</title>
 
-  <link rel="stylesheet" type="text/css" href="../../node_modules/octicons/build/octicons.css">
   <link rel="stylesheet" type="text/css" href="../../node_modules/codemirror/lib/codemirror.css">
   <style>
     #content {
@@ -37,5 +36,15 @@
 
 <script type="text/javascript" src="http://localhost:8080/assets/preferences.js"></script>
 
+<script>
+window.electron = require('electron')
+window.remote = window.electron.remote
+
+const installExtension = require('electron-devtools-installer')
+installExtension.default(installExtension.REACT_DEVELOPER_TOOLS)
+  .then((name) => console.log(`Added Extension:  ${name}`))
+  .catch((err) => console.log('An error occurred: ', err))
+</script>
+
 </body>
 </html>
diff --git a/app/lib/preferences.production.html b/app/lib/preferences.production.html
index 5fbb54ebb..aef66143e 100644
--- a/app/lib/preferences.production.html
+++ b/app/lib/preferences.production.html
@@ -6,7 +6,7 @@
 
   <title>Preferences - Inpad</title>
 
-  <link rel="stylesheet" type="text/css" href="../../node_modules/octicons/build/octicons.css">
+  <link rel="stylesheet" type="text/css" href="../../compiled/preferences.css">
   <link rel="stylesheet" type="text/css" href="../../node_modules/codemirror/lib/codemirror.css">
   <style>
     #content {
@@ -29,12 +29,6 @@
 <script type="text/javascript" src="../../node_modules/codemirror/lib/codemirror.js"></script>
 <script type="text/javascript" src="../../node_modules/codemirror/mode/meta.js"></script>
 
-<script type="text/javascript" src="../../node_modules/react/dist/react.min.js"></script>
-<script type="text/javascript" src="../../node_modules/react-dom/dist/react-dom.min.js"></script>
-<script type="text/javascript" src="../../node_modules/redux/dist/redux.min.js"></script>
-<script type="text/javascript" src="../../node_modules/react-redux/dist/react-redux.min.js"></script>
-<script type="text/javascript" src="../../node_modules/immutable/dist/immutable.min.js"></script>
-
 <script type="text/javascript" src="../../compiled/preferences.js"></script>
 
 </body>
diff --git a/package.json b/package.json
index f5ef9098c..196d44d4f 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
     "start": "electron app/index.js",
     "start-dev": "NODE_ENV=development electron app/index.js",
     "compile": "NODE_ENV=production webpack --config webpack.config.js",
+    "analyze": "NODE_ENV=production webpack --config webpack.config.js --json | webpack-bundle-size-analyzer",
     "pack": "env-cmd ./.env build --dir",
-    "dist": "env-cmd ./.env build",
     "lint": "standard",
     "webpack": "NODE_ENV=development webpack-dev-server --config webpack.config.js",
     "test:run": "NODE_ENV=test electron ./tools/webpack-test.js",
@@ -33,39 +33,31 @@
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.18.0",
+    "color": "^0.11.4",
+    "css-loader": "^0.26.1",
     "electron": "^1.4.12",
     "electron-builder": "^10.12.0",
     "electron-devtools-installer": "^2.0.1",
     "electron-rebuild": "^1.3.0",
     "env-cmd": "^4.0.0",
-    "json-loader": "^0.5.4",
-    "pouchdb-adapter-memory": "^6.1.0",
-    "react-desktop": "^0.2.14",
-    "react-hot-loader": "^3.0.0-beta.6",
-    "react-router": "^3.0.0",
-    "react-router-redux": "^4.0.6",
-    "standard": "^8.5.0",
-    "url-loader": "^0.5.7",
-    "webpack": "^2.1.0-beta.27",
-    "webpack-dev-server": "^2.1.0-beta.11"
-  },
-  "dependencies": {
-    "codemirror": "^5.20.2",
-    "color": "^0.11.4",
-    "electron-auto-updater": "^0.8.3",
-    "electron-positioner": "^3.0.0",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "file-loader": "^0.9.0",
     "filenamify": "^1.2.1",
-    "github-markdown-css": "^2.4.1",
     "immutable": "^3.8.1",
-    "katex": "^0.6.0",
+    "json-loader": "^0.5.4",
     "lodash": "^4.16.6",
     "moment": "^2.17.0",
     "octicons": "^5.0.1",
+    "pouchdb-adapter-memory": "^6.1.0",
     "pouchdb-browser": "^6.1.0",
     "react": "^15.3.2",
+    "react-desktop": "^0.2.14",
     "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
     "react-immutable-proptypes": "^2.1.0",
     "react-redux": "^4.4.5",
+    "react-router": "^3.0.0",
+    "react-router-redux": "^4.0.6",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
     "remark": "^6.2.0",
@@ -74,9 +66,20 @@
     "remark-lint": "^5.2.0",
     "remark-slug": "^4.2.2",
     "sander": "^0.5.1",
+    "standard": "^8.5.0",
     "strip-markdown": "^3.0.0",
     "styled-components": "^1.0.10",
-    "unist-util-visit": "^1.1.1"
+    "unist-util-visit": "^1.1.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^2.2.0-rc.3",
+    "webpack-bundle-size-analyzer": "^2.2.0",
+    "webpack-dev-server": "^2.2.0-rc.0"
+  },
+  "dependencies": {
+    "codemirror": "^5.20.2",
+    "electron-positioner": "^3.0.0",
+    "github-markdown-css": "^2.4.1",
+    "katex": "^0.6.0"
   },
   "standard": {
     "parser": "babel-eslint"
diff --git a/src/lib/markdown.js b/src/lib/markdown.js
index 16b334ab6..979c636f2 100644
--- a/src/lib/markdown.js
+++ b/src/lib/markdown.js
@@ -1,5 +1,4 @@
 const remark = require('remark')
-const lint = require('remark-lint')
 const html = require('remark-html')
 const emoji = require('remark-emoji')
 const meta = require('./metaMapper')
@@ -24,7 +23,6 @@ const parser = remark()
   .use(slug)
   .use(emoji)
   .use(meta)
-  .use(lint)
   .use(line)
   .use(html)
 
diff --git a/src/main/index.js b/src/main/index.js
index 7678c3693..cf858d6e3 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -5,22 +5,12 @@ import store from './lib/redux/store'
 import App from './App'
 import history from './history'
 
+require('octicons/build/octicons.css')
+
 // Disable Pinch Zoom
 const {webFrame} = require('electron')
 webFrame.setZoomLevelLimits(1, 1)
 
-const isDev = process.env.NODE_ENV !== 'production'
-
-if (isDev) {
-  window.electron = require('electron')
-  window.remote = window.electron.remote
-
-  const installExtension = require('electron-devtools-installer')
-  installExtension.default(installExtension.REACT_DEVELOPER_TOOLS)
-    .then((name) => console.log(`Added Extension:  ${name}`))
-    .catch((err) => console.log('An error occurred: ', err))
-}
-
 // Ignore drag & drop event
 document.addEventListener('drop', function (e) {
   e.preventDefault()
@@ -31,8 +21,8 @@ document.addEventListener('dragover', function (e) {
   e.stopPropagation()
 })
 
-if (isDev) {
-  history.listen((location) => {
+if (process.env.NODE_ENV !== 'production') {
+  history.listen(location => {
     if (location.action === 'PUSH') {
       console.info('PUSHING...', location.pathname + location.search)
     }
diff --git a/src/preferences/index.js b/src/preferences/index.js
index 3bb972060..1bd766abf 100644
--- a/src/preferences/index.js
+++ b/src/preferences/index.js
@@ -5,22 +5,12 @@ import store from './lib/redux/store'
 import App from './App'
 import history from './history'
 
+require('octicons/build/octicons.css')
+
 // Disable Pinch Zoom
 const { webFrame } = require('electron')
 webFrame.setZoomLevelLimits(1, 1)
 
-const isDev = process.env.NODE_ENV !== 'production'
-
-if (isDev) {
-  window.electron = require('electron')
-  window.remote = window.electron.remote
-
-  const installExtension = require('electron-devtools-installer')
-  installExtension.default(installExtension.REACT_DEVELOPER_TOOLS)
-    .then((name) => console.log(`Added Extension:  ${name}`))
-    .catch((err) => console.log('An error occurred: ', err))
-}
-
 // Ignore drag & drop event
 document.addEventListener('drop', function (e) {
   e.preventDefault()
@@ -31,8 +21,8 @@ document.addEventListener('dragover', function (e) {
   e.stopPropagation()
 })
 
-if (isDev) {
-  history.listen((location) => {
+if (process.env.NODE_ENV !== 'production') {
+  history.listen(location => {
     if (location.action === 'PUSH') {
       console.info('PUSHING...', location.pathname + location.search)
     }
diff --git a/webpack.config.js b/webpack.config.js
index 089e6d492..de00ebbd0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const util = require('./tools/util')
 
 const port = 8080
@@ -13,7 +14,7 @@ let config = {
     preferences: ['./src/preferences/index.js']
   },
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: ['.js', '.jsx', '.json'],
     alias: {
       'components': path.join(__dirname, 'src/components'),
       'lib': path.join(__dirname, 'src/lib'),
@@ -26,7 +27,8 @@ let config = {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
       'process.env.CODEMIRROR_THEMES': JSON.stringify(util.getCodeMirrorThemes())
-    })
+    }),
+    new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true })
   ],
   externals: [
     // Electron
@@ -55,8 +57,7 @@ let config = {
       'react-redux': 'var ReactRedux',
       'redux': 'var Redux',
       'immutable': 'var Immutable',
-      'codemirror': 'var CodeMirror',
-      'pouchdb': 'var PouchDB'
+      'codemirror': 'var CodeMirror'
     }
   ],
   module: {
@@ -77,6 +78,12 @@ let config = {
             loader: 'json-loader'
           }
         ]
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract({
+          loader: 'css-loader'
+        })
       }
     ]
   },
@@ -98,12 +105,19 @@ let config = {
 
 switch (process.env.NODE_ENV) {
   case 'production':
+    config.plugins.push(new webpack.optimize.DedupePlugin())
     config.plugins.push(new webpack.optimize.UglifyJsPlugin())
     config.plugins.push(new webpack.LoaderOptionsPlugin({
       minimize: true
     }))
+    config.externals = [
+      'electron',
+      {
+        'codemirror': 'var CodeMirror'
+      }
+    ]
 
-    config.performance.hints = true
+    config.performance = false
     break
   case 'development':
     config.plugins.push(new webpack.HotModuleReplacementPlugin())