General optimization

This commit is contained in:
Eduard Ursu 2023-02-25 12:31:48 +01:00
parent 06eda1488e
commit 5f8f93fc12
6 changed files with 102 additions and 91 deletions

View file

@ -1,9 +1,7 @@
const path = require("path");
const path = require('path')
module.exports = {
// Source files path
src: path.resolve(__dirname, "../src"),
// Production build files path
build: path.resolve(__dirname, "../dist"),
public: path.resolve(__dirname, "../src"),
pages: ['index', 'fontlist', 'units', 'adblock', '404'],
};
src: path.resolve(__dirname, '../src'),
build: path.resolve(__dirname, '../dist'),
public: path.resolve(__dirname, '../src'),
pages: ['index', 'fontlist', 'units', 'adblock', '404']
}

View file

@ -1,25 +1,35 @@
const {PurgeCSS} = require("purgecss");
const path = require("path");
const config = require("./config")
const fs = require('fs');
const chalk = require("chalk");
const { PurgeCSS } = require('purgecss')
const path = require('path')
const config = require('./config')
const fs = require('fs')
const chalk = require('chalk')
const pages = config.pages
const options = pages.map(page => {
const css = path.join(config.build, `css/${page}.css`);
const content = [path.join(config.build, `${page}.html`), path.join(config.build, `js/${page}.js`)];
return {
css: [css],
content: content,
}
});
const options = pages.map((page) => {
const css = path.join(config.build, `css/${page}.css`)
const content = [
path.join(config.build, `${page}.html`),
path.join(config.build, `js/${page}.js`)
]
return {
css: [css],
content: content
}
})
Promise.all(options.map(option => new PurgeCSS().purge(option))).then(results => {
results.forEach((result, i) => {
const css = result[0].css;
const cssFile = path.join(config.build, `css/${pages[i]}.css`);
console.log(chalk.green(`File: ${cssFile}`));
console.log(`Original size: ${(fs.statSync(path.join(config.build, `css/${pages[i]}.css`)).size / 1024).toFixed(2)}KB`);
console.log(`Optimized size: ${(css.length / 1024).toFixed(2)}KB`);
fs.writeFileSync(cssFile, css);
});
});
Promise.all(options.map((option) => new PurgeCSS().purge(option))).then(
(results) => {
results.forEach((result, i) => {
const css = result[0].css
const cssFile = path.join(config.build, `css/${pages[i]}.css`)
console.log(chalk.green(`File: ${cssFile}`))
console.log(
`Original size: ${(
fs.statSync(path.join(config.build, `css/${pages[i]}.css`))
.size / 1024
).toFixed(2)}KB`
)
console.log(`Optimized size: ${(css.length / 1024).toFixed(2)}KB`)
fs.writeFileSync(cssFile, css)
})
}
)

View file

@ -1,16 +1,16 @@
const main = require("./webpack.main");
const {merge} = require("webpack-merge");
const config = require("./config");
const main = require('./webpack.main')
const { merge } = require('webpack-merge')
const config = require('./config')
module.exports = merge(main, {
mode: "development",
devServer: {static: {
directory: config.dist,
},
compress: true,
port: 3000,
hot: true,
open: true
}
});
mode: 'development',
devServer: {
static: {
directory: config.dist
},
compress: true,
port: 3000,
hot: true,
open: true
}
})

View file

@ -1,7 +1,7 @@
const HTMLWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const config = require("./config");
const config = require('./config')
const pages = config.pages
module.exports = {
context: config.src,
@ -17,34 +17,37 @@ module.exports = {
clean: false,
assetModuleFilename: '[path][name][ext]'
},
plugins: [
// Copies all the files from public to assets except css, html and js
new CopyWebpackPlugin({
patterns: [
{
from: "./assets",
to: "assets",
from: './assets',
to: 'assets',
globOptions: {
ignore: ["*.DS_Store", "**/css/*.css", "**/js/*.js", "**/*.html"],
//ignore: [],
ignore: [
'*.DS_Store',
'**/css/*.css',
'**/js/*.js',
'**/*.html'
]
},
noErrorOnMissing: true,
},
],
noErrorOnMissing: true
}
]
}),
new MiniCssExtractPlugin({
filename: "./css/[name].css",
chunkFilename: "[name].css",
filename: './css/[name].css',
chunkFilename: '[name].css'
}),
...pages.map(page =>
new HTMLWebpackPlugin({
template: `./${page}.ejs`,
filename: `${page}.html`,
chunks: [page],
minify: false,
sources: false
})
...pages.map(
(page) =>
new HTMLWebpackPlugin({
template: `./${page}.ejs`,
filename: `${page}.html`,
chunks: [page],
minify: false,
sources: false
})
)
],
module: {
@ -55,22 +58,22 @@ module.exports = {
},
{
test: /\.ejs$/i,
use: ['html-loader', 'template-ejs-loader'],
use: ['html-loader', 'template-ejs-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
use: 'babel-loader'
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader, // extract css from commonjs
"css-loader", // turn css into commonjs
"sass-loader", // turn scss into css
],
},
],
'css-loader', // turn css into commonjs
'sass-loader' // turn scss into css
]
}
]
}
};
}

View file

@ -1,17 +1,17 @@
const main = require("./webpack.main");
const {merge} = require("webpack-merge");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const main = require('./webpack.main')
const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
module.exports = merge(main, {
mode: "production",
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
test: /\.js(\?.*)?$/i,
})],
},
plugins: [
new CleanWebpackPlugin(),
]
});
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i
})
]
},
plugins: [new CleanWebpackPlugin()]
})

View file

@ -24,7 +24,7 @@ if (tzversion !== version) {
var LS = new LocalStorageManager('adb_tool')
var results = LS.get('results')
var settings = LS.get('settings')
if (!settings || settings['hideCF']) {
if (!settings || !settings['showCF']) {
settings = {
collapseAll: true,
showCF: true,