Examples for codesplitting

crecotun · May 25, 2018 · 9547fd1 · 9547fd1
1 parent c35000c
commit 9547fd1
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+### 4.2.0
+- Now we can have 1 js file per page. Files are dynamically converted to entry points in webpack config.
+
 ### 4.1.0
 - webpack updated to 4 vers
 - updated all dev deps as well

diff --git a/fabium/webpack.config.js b/fabium/webpack.config.js
@@ -32,7 +32,10 @@ module.exports = {
 	devtool: !isProduction ? '#eval-source-map' : false,
 
 	resolve: {
-		modules: ['node_modules'],
+		modules: [
+			'node_modules',
+			'scripts'
+		],
 		enforceExtension: false
 	},
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "fabium",
-	"version": "4.1.0",
+	"version": "4.2.0",
 	"description": "front-end boilerplate for fast project start",
 	"main": "fabium/index.js",
 	"dependencies": {

diff --git a/src/assets/scripts/components/header.js b/src/assets/scripts/components/header.js
@@ -1,14 +1,11 @@
 import $ from 'jquery'
+import 'vendor/isInViewport'
 
 export default () => {
 	const $component = $('.header')
 
 	if (!$component.length) {
 		return null
 	}
-
-	Promise.all(['1']).then(() => {
-		alert(1212)
-	})
 }
 
diff --git a/src/assets/scripts/main.js b/src/assets/scripts/main.js
diff --git a/src/assets/scripts/pages/main.js b/src/assets/scripts/pages/main.js
@@ -1 +1,3 @@
 import '../components/header'
+
+console.log('main page')
diff --git a/src/assets/scripts/pages/second.js b/src/assets/scripts/pages/second.js
@@ -0,0 +1,3 @@
+import '../components/header'
+
+console.log('second page')
diff --git a/src/templates/components/header/header.pug b/src/templates/components/header/header.pug
@@ -1,3 +1,2 @@
 header.header
-	h1 Test
-	p Hola!
+	h1 Header
diff --git a/src/templates/layouts/base.pug b/src/templates/layouts/base.pug
@@ -19,4 +19,5 @@ html
 				.layout--footer
 					block footer
 
-		include ../partials/scripts
+		block scripts
+			include ../partials/scripts
diff --git a/src/templates/pages/index.pug b/src/templates/pages/index.pug
@@ -45,4 +45,5 @@ html(lang='en')
 		nav
 			ul
 				li: a(href='./main.html') Main
+				li: a(href='./second.html') Second
 				//- Append Pages Here
diff --git a/src/templates/pages/main.pug b/src/templates/pages/main.pug
@@ -1,4 +1,7 @@
 extends ../layouts/base.pug
 
+block append scripts
+	script(src='./assets/scripts/main.js' defer)
+
 block header
 	include ../components/header/header
diff --git a/src/templates/pages/second.pug b/src/templates/pages/second.pug
@@ -0,0 +1,8 @@
+
+extends ../layouts/base.pug
+
+block append scripts
+	script(src='./assets/scripts/second.js' defer)
+
+block header
+	include ../components/header/header
diff --git a/src/templates/partials/scripts.pug b/src/templates/partials/scripts.pug
@@ -1,2 +1 @@
 script(src='./assets/scripts/common.js' defer)
-script(src='./assets/scripts/main.js' defer)