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.

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

Improve performance #85

Merged
merged 8 commits into from
May 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 2 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

148 changes: 74 additions & 74 deletions src/assets/scripts/__scripts.11ty.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,87 +13,87 @@ const Dotenv = require("dotenv-webpack")
const isProd = process.env.ELEVENTY_ENV === "production"

module.exports = class {
// Configure Webpack in Here
async data() {
const entryPath = path.join(__dirname, `/${ENTRY_FILE_NAME}`)
const outputPath = path.resolve(__dirname, "../../memory-fs/js/")
// Configure Webpack in Here
async data() {
const entryPath = path.join(__dirname, `/${ENTRY_FILE_NAME}`)
const outputPath = path.resolve(__dirname, "../../memory-fs/js/")

// Transform .js files, run through Babel
const rules = [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-runtime"]
}
}
}
]
// Transform .js files, run through Babel
const rules = [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-runtime"]
}
}
}
]

// pass environment down to scripts
const envPlugin = new webpack.EnvironmentPlugin({
ELEVENTY_ENV: process.env.ELEVENTY_ENV
})
// pass environment down to scripts
const envPlugin = new webpack.EnvironmentPlugin({
ELEVENTY_ENV: process.env.ELEVENTY_ENV
})

// Main Config
const webpackConfig = {
mode: isProd ? "production" : "development",
entry: entryPath,
output: { path: outputPath },
module: { rules },
plugins: [envPlugin, new Dotenv()]
}
// Main Config
const webpackConfig = {
mode: isProd ? "production" : "development",
entry: entryPath,
output: { path: outputPath },
module: { rules },
plugins: [envPlugin, new Dotenv()]
}

return {
permalink: `/assets/scripts/${ENTRY_FILE_NAME}`,
eleventyExcludeFromCollections: true,
webpackConfig
}
}
return {
permalink: `/assets/scripts/${ENTRY_FILE_NAME}`,
eleventyExcludeFromCollections: true,
webpackConfig
}
}

// Compile JS with Webpack, write the result to Memory Filesystem.
// this brilliant idea is taken from Mike Riethmuller / Supermaya
// @see https://github.com/MadeByMike/supermaya/blob/master/site/utils/compile-webpack.js
compile(webpackConfig) {
const compiler = webpack(webpackConfig)
compiler.outputFileSystem = mfs
compiler.inputFileSystem = fs
compiler.intermediateFileSystem = mfs
// Compile JS with Webpack, write the result to Memory Filesystem.
// this brilliant idea is taken from Mike Riethmuller / Supermaya
// @see https://github.com/MadeByMike/supermaya/blob/master/site/utils/compile-webpack.js
compile(webpackConfig) {
const compiler = webpack(webpackConfig)
compiler.outputFileSystem = mfs
compiler.inputFileSystem = fs
compiler.intermediateFileSystem = mfs

return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err || stats.hasErrors()) {
const errors =
err ||
(stats.compilation ? stats.compilation.errors : null)
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err || stats.hasErrors()) {
const errors =
err ||
(stats.compilation ? stats.compilation.errors : null)

reject(errors)
return
}
reject(errors)
return
}

mfs.readFile(
webpackConfig.output.path + "/" + ENTRY_FILE_NAME,
"utf8",
(err, data) => {
if (err) reject(err)
else resolve(data)
}
)
})
})
}
mfs.readFile(
webpackConfig.output.path + "/" + ENTRY_FILE_NAME,
"utf8",
(err, data) => {
if (err) reject(err)
else resolve(data)
}
)
})
})
}

// render the JS file
async render({ webpackConfig }) {
try {
const result = await this.compile(webpackConfig)
return result
} catch (err) {
console.log(err)
return null
}
}
// render the JS file
async render({ webpackConfig }) {
try {
const result = await this.compile(webpackConfig)
return result
} catch (err) {
console.log(err)
return null
}
}
}
37 changes: 25 additions & 12 deletions src/assets/scripts/main.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
import "focus-visible"
import initAnimations from "./modules/animation"
import initNavigation from "./modules/nav"
import initSpotifyFetcher from "./modules/spotify"
import initLocalTime from "./modules/local-time"
import initClipboard from "./modules/clipboard"
import initModal from "./modules/modal"
import initSmoothScroll from "./modules/smooth-scroll"
import initThemeSwitcher from "./modules/theme-switcher"
import initTagToggle from "./modules/tag-toggle"
import initRecommendationAccordion from "./modules/rec-accordion"
import initQuickNavAbout from "./modules/quick-nav-about"
import initNavigateToUrl from "./modules/site-version"

// Internal Modules
import "./modules/animation"
import "./modules/nav"
import "./modules/spotify"
import "./modules/clipboard"
import "./modules/local-time"
import "./modules/quick-nav-about"
import "./modules/site-version"
import "./modules/rec-accordion"
import "./modules/smooth-scroll"
import "./modules/modal"
import "./modules/theme-switcher"
import "./modules/tag-toggle"
import "./modules/preload"

initAnimations()
initNavigation()
initSpotifyFetcher()
initLocalTime()
initClipboard("hi@afnizarnur.com")
initModal()
initSmoothScroll()
initThemeSwitcher()
initTagToggle()
initRecommendationAccordion()
initQuickNavAbout()
initNavigateToUrl()
Loading