From 29f84e1131438a49747e620e4cab03b33ba5cef2 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 23 Dec 2016 19:13:57 -0200 Subject: [PATCH] split pages into multiple bundles --- build/webpack/prod-docs.js | 2 +- docs/src/App.vue | 8 ++++- docs/src/index.js | 27 ++++++++------- docs/src/routes.js | 68 +++++++++++++++++++------------------- 4 files changed, 57 insertions(+), 48 deletions(-) diff --git a/build/webpack/prod-docs.js b/build/webpack/prod-docs.js index 3d1f422..1123148 100644 --- a/build/webpack/prod-docs.js +++ b/build/webpack/prod-docs.js @@ -14,7 +14,7 @@ export default merge(baseConfig, { path: path.join(config.rootPath, 'docs'), publicPath: '', filename: '[name].[chunkhash:8].js', - chunkFilename: '[id].[chunkhash:8].js' + chunkFilename: '[name].[chunkhash:8].js' }, vue: { loaders: { diff --git a/docs/src/App.vue b/docs/src/App.vue index f75f858..e42423d 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -336,7 +336,13 @@ }, computed: { logo() { - return 'assets/logo-vue-material-' + Vue.material.currentTheme + '.png'; + let theme = Vue.material.currentTheme; + + if (theme) { + return `assets/logo-vue-material-${theme}.png`; + } + + return 'assets/logo-vue-material-default.png'; } }, methods: { diff --git a/docs/src/index.js b/docs/src/index.js index 8eb0ec5..b070083 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -30,19 +30,22 @@ let router = new VueRouter({ let Docs = Vue.component('app', App); let handleSectionTheme = (currentRoute) => { let theme = 'default'; + let name = currentRoute.name; - if (currentRoute.name === 'getting-started') { - theme = 'indigo'; - } else if (currentRoute.name.indexOf('themes') >= 0) { - theme = 'cyan'; - } else if (currentRoute.name.indexOf('ui-elements') >= 0) { - theme = 'purple'; - } else if (currentRoute.name === 'changelog') { - theme = 'orange'; - } else if (currentRoute.name === 'about') { - theme = 'green'; - } else if (currentRoute.name === 'error') { - theme = 'red'; + if (name) { + if (name === 'getting-started') { + theme = 'indigo'; + } else if (name.indexOf('themes') >= 0) { + theme = 'cyan'; + } else if (name.indexOf('ui-elements') >= 0) { + theme = 'purple'; + } else if (name === 'changelog') { + theme = 'orange'; + } else if (name === 'about') { + theme = 'green'; + } else if (name === 'error') { + theme = 'red'; + } } Vue.material.setCurrentTheme(theme); diff --git a/docs/src/routes.js b/docs/src/routes.js index 1382410..6d4729d 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -1,43 +1,43 @@ -/* main */ -import Introduction from './pages/Introduction'; -import GettingStarted from './pages/GettingStarted'; -import About from './pages/About'; -import Changelog from './pages/Changelog'; -import Error404 from './pages/Error'; +/* Root */ +const Introduction = require('./pages/Introduction'); +const GettingStarted = require('./pages/GettingStarted'); +const About = require('./pages/About'); +const Changelog = require('./pages/Changelog'); +const Error404 = require('./pages/Error'); /* Components */ -import Avatar from './pages/components/Avatar'; -import BottomBar from './pages/components/BottomBar'; -import Buttons from './pages/components/Buttons'; -import ButtonToggle from './pages/components/ButtonToggle'; -import Card from './pages/components/Card'; -import Checkbox from './pages/components/Checkbox'; -import Dialog from './pages/components/Dialog'; -import Icon from './pages/components/Icon'; -import InkRipple from './pages/components/InkRipple'; -import Input from './pages/components/Input'; -import List from './pages/components/List'; -import Menu from './pages/components/Menu'; -import Radio from './pages/components/Radio'; -import Select from './pages/components/Select'; -import Sidenav from './pages/components/Sidenav'; -/*import Snackbar from './pages/components/Snackbar';*/ -import Spinner from './pages/components/Spinner'; -import Subheader from './pages/components/Subheader'; -import Switch from './pages/components/Switch'; -import Table from './pages/components/Table'; -import Tabs from './pages/components/Tabs'; -import Toolbar from './pages/components/Toolbar'; -import Tooltip from './pages/components/Tooltip'; -import Whiteframe from './pages/components/Whiteframe'; +const Avatar = (resolve) => require(['./pages/components/Avatar'], resolve); +const BottomBar = (resolve) => require(['./pages/components/BottomBar'], resolve); +const Buttons = (resolve) => require(['./pages/components/Buttons'], resolve); +const ButtonToggle = (resolve) => require(['./pages/components/ButtonToggle'], resolve); +const Card = (resolve) => require(['./pages/components/Card'], resolve); +const Checkbox = (resolve) => require(['./pages/components/Checkbox'], resolve); +const Dialog = (resolve) => require(['./pages/components/Dialog'], resolve); +const Icon = (resolve) => require(['./pages/components/Icon'], resolve); +const InkRipple = (resolve) => require(['./pages/components/InkRipple'], resolve); +const Input = (resolve) => require(['./pages/components/Input'], resolve); +const List = (resolve) => require(['./pages/components/List'], resolve); +const Menu = (resolve) => require(['./pages/components/Menu'], resolve); +const Radio = (resolve) => require(['./pages/components/Radio'], resolve); +const Select = (resolve) => require(['./pages/components/Select'], resolve); +const Sidenav = (resolve) => require(['./pages/components/Sidenav'], resolve); +/*const Snackbar = (resolve) => require(['./pages/components/Snackbar'], resolve);*/ +const Spinner = (resolve) => require(['./pages/components/Spinner'], resolve); +const Subheader = (resolve) => require(['./pages/components/Subheader'], resolve); +const Switch = (resolve) => require(['./pages/components/Switch'], resolve); +const Table = (resolve) => require(['./pages/components/Table'], resolve); +const Tabs = (resolve) => require(['./pages/components/Tabs'], resolve); +const Toolbar = (resolve) => require(['./pages/components/Toolbar'], resolve); +const Tooltip = (resolve) => require(['./pages/components/Tooltip'], resolve); +const Whiteframe = (resolve) => require(['./pages/components/Whiteframe'], resolve); /* UI Elements */ -import Typography from './pages/ui-elements/Typography'; -import Layout from './pages/ui-elements/Layout'; +const Typography = (resolve) => require(['./pages/ui-elements/Typography'], resolve); +const Layout = (resolve) => require(['./pages/ui-elements/Layout'], resolve); /* Themes */ -import Configuration from './pages/themes/Configuration'; -import DynamicThemes from './pages/themes/DynamicThemes'; +const Configuration = (resolve) => require(['./pages/themes/Configuration'], resolve); +const DynamicThemes = (resolve) => require(['./pages/themes/DynamicThemes'], resolve); const main = [ {