[WIP] Optimize chunks! 💯 💯

pull/501/head
Rick Carlino 2017-10-13 11:46:41 -05:00
parent 12d56ecaaa
commit 01462b0f25
2 changed files with 44 additions and 23 deletions

View File

@ -14,7 +14,8 @@ conf.output = {
// must match config.webpack.output_dir
path: path.join(__dirname, '..', 'public', 'webpack'),
publicPath: '/webpack/',
filename: '[name]-[chunkhash].js'
filename: '[name]-[chunkhash].js',
chunkFilename: '[name]-[chunkhash].chunk.js'
};
[

View File

@ -62,7 +62,7 @@ const errorLoading = (cb: Function) => function handleError(err: object) {
const controlsRoute = {
path: "app/controls",
getComponent(_discard: void, cb: Function) {
import("./controls/controls").then(
import( /* webpackChunkName: "controls" */ "./controls/controls").then(
(module) => cb(undefined, module.Controls)
).catch(errorLoading(cb));
}
@ -116,7 +116,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "app/account",
getComponent(_discard: void, cb: Function) {
import("./account/index")
import( /* webpackChunkName: "accounts_index" */ "./account/index")
.then(module => cb(undefined, module.Account))
.catch(errorLoading(cb));
}
@ -125,7 +125,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "app/device",
getComponent(_discard: void, cb: Function) {
import("./devices/devices")
import( /* webpackChunkName: "devices_devices" */ "./devices/devices")
.then(module => cb(undefined, module.Devices))
.catch(errorLoading(cb));
}
@ -133,7 +133,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "app/farmware",
getComponent(_discard: void, cb: Function) {
import("./farmware/index")
import( /* webpackChunkName: "farmwares_index" */ "./farmware/index")
.then(module => cb(undefined, module.FarmwarePage))
.catch(errorLoading(cb));
}
@ -142,7 +142,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
path: "app/designer",
onEnter: this.maybeReplaceDesignerModules.bind(this),
getComponent(_discard: void, cb: Function) {
import("./farm_designer/index")
import( /* webpackChunkName: "fd_index" */ "./farm_designer/index")
.then(module => cb(undefined, module.FarmDesigner))
.catch(errorLoading(cb));
},
@ -150,7 +150,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "plants",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/plants/plant_inventory")
import(
/* webpackChunkName: "fd_plants_plant_inventory" */
"./farm_designer/plants/plant_inventory")
.then(module => cb(undefined, module.Plants))
.catch(errorLoading(cb));
},
@ -158,7 +160,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "plants/crop_search",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/plants/crop_catalog")
import(
/* webpackChunkName: "fd_plants_crop_catalog" */
"./farm_designer/plants/crop_catalog")
.then(module => cb(undefined, module.CropCatalog))
.catch(errorLoading(cb));
},
@ -166,7 +170,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "plants/crop_search/:crop",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/plants/crop_info")
import(
/* webpackChunkName: "fd_plants_crop_info" */
"./farm_designer/plants/crop_info")
.then(module => cb(undefined, module.CropInfo))
.catch(errorLoading(cb));
},
@ -174,7 +180,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "plants/crop_search/:crop/add",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/plants/add_plant")
import(
/* webpackChunkName: "fd_plants_add_plants" */
"./farm_designer/plants/add_plant")
.then(module => cb(undefined, module.AddPlant))
.catch(errorLoading(cb));
},
@ -182,7 +190,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "plants/select",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/plants/select_plants")
import(
/* webpackChunkName: "fd_plants_select_plants" */
"./farm_designer/plants/select_plants")
.then(module => cb(undefined, module.SelectPlants))
.catch(errorLoading(cb));
},
@ -190,7 +200,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "plants/:plant_id",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/plants/plant_info")
import(
/* webpackChunkName: "fd_plants_plant_info" */
"./farm_designer/plants/plant_info")
.then(module => cb(undefined, module.PlantInfo))
.catch(errorLoading(cb));
},
@ -198,7 +210,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "plants/:plant_id/edit",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/plants/edit_plant_info")
import(
/* webpackChunkName: "fd_plants_edit_plant_info" */
"./farm_designer/plants/edit_plant_info")
.then(module => cb(undefined, module.EditPlantInfo))
.catch(errorLoading(cb));
},
@ -206,7 +220,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "farm_events",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/farm_events/farm_events")
import(
/* webpackChunkName: "fd_farm_events_farm_events" */
"./farm_designer/farm_events/farm_events")
.then(module => cb(undefined, module.FarmEvents))
.catch(errorLoading(cb));
}
@ -214,7 +230,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "farm_events/add",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/farm_events/add_farm_event")
import(
/* webpackChunkName: "fd_farm_events_add_farm_event" */
"./farm_designer/farm_events/add_farm_event")
.then(module => cb(undefined, module.AddFarmEvent))
.catch(errorLoading(cb));
}
@ -222,7 +240,9 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "farm_events/:farm_event_id",
getComponent(_discard: void, cb: Function) {
import("./farm_designer/farm_events/edit_farm_event")
import(
/* webpackChunkName: "fd_farm_events_edit_farm_event" */
"./farm_designer/farm_events/edit_farm_event")
.then(module => cb(undefined, module.EditFarmEvent))
.catch(errorLoading(cb));
}
@ -233,11 +253,11 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
path: "app/regimens",
getComponent(_discard: void, cb: Function) {
if (!isMobile()) {
import("./regimens/index")
import( /* webpackChunkName: "QQQ" */ "./regimens/index")
.then(module => cb(undefined, module.Regimens))
.catch(errorLoading(cb));
} else {
import("./regimens/list/index")
import( /* webpackChunkName: "QQQ" */ "./regimens/list/index")
.then(module => cb(undefined, module.RegimensList))
.catch(errorLoading(cb));
}
@ -246,7 +266,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "app/regimens/:regimen",
getComponent(_discard: void, cb: Function) {
import("./regimens/index")
import( /* webpackChunkName: "QQQ" */ "./regimens/index")
.then(module => cb(undefined, module.Regimens))
.catch(errorLoading(cb));
}
@ -254,7 +274,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "app/sequences",
getComponent(_discard: void, cb: Function) {
import("./sequences/sequences")
import( /* webpackChunkName: "QQQ" */ "./sequences/sequences")
.then(module => cb(undefined, module.Sequences))
.catch(errorLoading(cb));
},
@ -262,7 +282,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "app/sequences/:sequence",
getComponent(_discard: void, cb: Function) {
import("./sequences/sequences")
import( /* webpackChunkName: "QQQ" */ "./sequences/sequences")
.then(module => cb(undefined, module.Sequences))
.catch(errorLoading(cb));
},
@ -270,7 +290,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "app/tools",
getComponent(_discard: void, cb: Function) {
import("./tools/index")
import( /* webpackChunkName: "QQQ" */ "./tools/index")
.then(module => cb(undefined, module.Tools))
.catch(errorLoading(cb));
}
@ -278,7 +298,7 @@ export class RootComponent extends React.Component<RootComponentProps, {}> {
{
path: "*",
getComponent(_discard: void, cb: Function) {
import("./404")
import( /* webpackChunkName: "QQQ" */ "./404")
.then(module => cb(undefined, module.FourOhFour))
.catch(errorLoading(cb));
}