d3ward/toolz
1
1
Fork 0
mirror of https://github.com/d3ward/toolz.git synced 2024-09-20 14:56:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

General optimization

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
config/config.js
View file

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

48
config/purgecss.js
View file

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

16
config/webpack.dev.js
View file

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

49
config/webpack.main.js
View file

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

24
config/webpack.prod.js
View file

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

2
src/js/adblock.js
View file

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