Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Route Based Code Splitting #265

Merged
merged 17 commits into from
Jun 4, 2020
Merged

Route Based Code Splitting #265

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c888286
feat: adding basic code splitting
hutchgrant Nov 27, 2019
096a1d7
feat: adding app-template, removing dep, adding eslintignore
hutchgrant Nov 27, 2019
9bb4009
feat: adding loading and spinner components, fix test
hutchgrant Nov 27, 2019
b1ea9e3
fix: dependencies removed
hutchgrant Nov 27, 2019
7ad4e7e
fix: adjust chunk filenames
hutchgrant Nov 27, 2019
210a982
feat: combine chunks based on page routes
hutchgrant Dec 4, 2019
e0a2a0d
feat: allow splitchunkplugin from config
hutchgrant Dec 4, 2019
37d7f68
fix: condense optimization config
hutchgrant Dec 4, 2019
047df37
Merge branch 'master' into feat/issue-136-code-splitting
hutchgrant Mar 16, 2020
eaf4aeb
Merge branch 'master' of github.com:ProjectEvergreen/greenwood into f…
hutchgrant Apr 24, 2020
17305cb
fix: remove formatting issues
hutchgrant May 2, 2020
4bfec57
fix: chunks arr and remove loading component
hutchgrant May 3, 2020
8f5b7c1
fix: remove chunk optimization
hutchgrant May 3, 2020
d1f1144
fix: add min content height, stop footer flash
hutchgrant Jun 3, 2020
949a1dc
remove forced formatting
thescientist13 Jun 4, 2020
a1bbfb2
Merge branch 'feat/issue-136-code-splitting' of github.com:ProjectEve…
thescientist13 Jun 4, 2020
097fedb
Merge branch 'master' into feat/issue-136-code-splitting
thescientist13 Jun 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions greenwood.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,61 @@ module.exports = {
{ rel: 'icon', href: FAVICON_HREF },
{ name: 'google-site-verification', content: '4rYd8k5aFD0jDnN0CCFgUXNe4eakLP4NnA18mNnK5P0' }
],
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 6,
maxInitialRequests: 4,
automaticNameDelimiter: '~',
automaticNameMaxLength: 30,
cacheGroups: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, We should be doing this in webpack.config.common.js for the user by default.

And also do some sort of dynamic creation of cacheGroups here like we do in webpack.config.common.js with NormalModuleReplaclementPlugin.

Copy link
Member Author

@hutchgrant hutchgrant Dec 10, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking along the lines of similar to a plugin. If a developer wants custom split routes, they can configure it however they please. But I also agree we should be doing it by default as well.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I would still like to see this done dynamically generated based on the folders set in the users pages/ directory for now. Easy enough for us to make another issue for thinking about how to make it a public API, likely hand in hand with being able to allow our Graph to also go "deeper" than a depth of one:

about: {
test(module, chunks) {
const regexp = /about/i;
const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));

return result;
},
name: 'about',
chunks: 'all'
},
docs: {
test(module, chunks) {
const regexp = /docs/i;
const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));

return result;
},
name: 'docs',
chunks: 'all'
},
gettingStarted: {
test(module, chunks) {
const regexp = /getting-started/i;
const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));

return result;
},
name: 'getting-started',
chunks: 'all'
},
plugins: {
test(module, chunks) {
const regexp = /plugins/i;
const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));

return result;
},
name: 'plugins',
chunks: 'all'
}
}
}
},

plugins: [
...pluginGoogleAnalytics({
analyticsId: 'UA-147204327-1'
Expand Down
56 changes: 2 additions & 54 deletions packages/cli/src/config/webpack.config.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,60 +126,8 @@ module.exports = ({ config, context }) => {
loader: 'file-loader'
}]
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 6,
maxInitialRequests: 4,
automaticNameDelimiter: '~',
automaticNameMaxLength: 30,
cacheGroups: {
about: {
test(module, chunks) {
const regexp = /about/i;
const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));

return result;
},
name: 'about',
chunks: 'all'
},
docs: {
test(module, chunks) {
const regexp = /docs/i;
const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));

return result;
},
name: 'docs',
chunks: 'all'
},
gettingStarted: {
test(module, chunks) {
const regexp = /getting-started/i;
const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));

return result;
},
name: 'getting-started',
chunks: 'all'
},
plugins: {
test(module, chunks) {
const regexp = /plugins/i;
const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));

return result;
},
name: 'plugins',
chunks: 'all'
}
}
}
},

optimization: config.optimization,
hutchgrant marked this conversation as resolved.
Show resolved Hide resolved

plugins: [
new HtmlWebpackPlugin({
Expand Down
7 changes: 6 additions & 1 deletion packages/cli/src/lifecycles/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ let defaultConfig = {
publicPath: '/',
title: 'Greenwood App',
meta: [],
optimization: {},
hutchgrant marked this conversation as resolved.
Show resolved Hide resolved
plugins: [],
themeFile: 'theme.css'
};
Expand All @@ -24,7 +25,7 @@ module.exports = readAndMergeConfig = async() => {

if (await fs.exists(path.join(process.cwd(), 'greenwood.config.js'))) {
const userCfgFile = require(path.join(process.cwd(), 'greenwood.config.js'));
const { workspace, devServer, publicPath, title, meta, plugins, themeFile } = userCfgFile;
const { workspace, devServer, publicPath, title, meta, plugins, themeFile, optimization } = userCfgFile;

// workspace validation
if (workspace) {
Expand Down Expand Up @@ -96,6 +97,10 @@ module.exports = readAndMergeConfig = async() => {
customConfig.themeFile = themeFile;
}

if (optimization && Object.keys(optimization).length > 0) {
hutchgrant marked this conversation as resolved.
Show resolved Hide resolved
customConfig.optimization = optimization;
}

if (devServer && Object.keys(devServer).length > 0) {

if (devServer.host) {
Expand Down