M-Labs/web2019
5
0
Fork 3
Code Issues 21 Pull Requests 2 Releases Wiki Activity

Fix and optimize shop styles and remove jquery

Browse Source 
Reduce bootstrap bundle, replace jquery dependant code and remove jquery. Optimize style loading.
Overall the lighthouse metrics are far better now.

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-12-24 13:06:36 +08:00
parent 037cadbe6d
commit 3ccbd41ef2
10 changed files with 744 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

859
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -8,7 +8,8 @@
"start": "npx webpack --watch",
"build": "npx webpack",
"start-dev": "npx webpack --watch --mode=development --devtool=inline-source-map",
"build-dev": "npx webpack --mode=development --devtool=inline-source-map"
"build-dev": "npx webpack --mode=development --devtool=inline-source-map",
"optimize-bootstrap": "zola build -o tmp_out && npx purgecss --css static/css/bootstrap-5.3.0.min.css --content 'tmp_out/**/*.html' -o static/css/bootstrap-5.3.0.opt.css --safelist modal-backdrop && rm -rf tmp_out"
},
"repository": {
"type": "git",
@ -33,7 +34,8 @@
"babel-preset-minify": "^0.5.2",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4",
"webpack-preprocessor-loader": "^1.3.0"
"webpack-preprocessor-loader": "^1.3.0",
"purgecss": "^7.0.2"
},
"babel": {
"presets": [

5
static/css/bootstrap-5.3.0.opt.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
static/js/jquery-3.7.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
static/js/jquery-3.7.0.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
static/sw.js
View File

@ -2,8 +2,6 @@ var CACHE_NAME = 'ml-03';
var urlsToCache = [
'/css/bootstrap-5.3.0.min.css',
'/css/styles.css',
'/js/jquery-3.7.0.slim.min.js',
'/js/jquery-3.7.0.min.js',
'/js/bootstrap-5.3.0.min.js',
'/js/react.production.min.js',
'/js/react-dom.production.min.js',

3
templates/404.html
View File

@ -43,7 +43,7 @@
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}">
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.opt.css', cachebust=true) }}">
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
{% block styles %}{% endblock %}
</head>
@ -155,7 +155,6 @@
<!-- ./FOOTER -->
<script src="{{ get_url(path='js/jquery-3.7.0.slim.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}"></script>
<script>

33
templates/_base.html
View File

@ -42,12 +42,12 @@
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}" as="style">
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}" as="style">
{% block links %}{% endblock %}
{% block styles %}{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.opt.css', cachebust=true) }}">
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
{% endblock %}
</head>
@ -171,7 +171,6 @@
<!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> -->
<script src="{{ get_url(path='js/jquery-3.7.0.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}" defer></script>
<script>
@ -186,16 +185,20 @@
</script>
<script>
$(function () {
$('#modalEnlarged').on('hidden.bs.modal', function (e) {
$('#enlarged').attr('src', '');
});
document.addEventListener('DOMContentLoaded', function() {
const modal = document.getElementById('modalEnlarged');
const enlargedImg = document.getElementById('enlarged');
$('[data-popup]').click(function (evt) {
var _self = $(this);
var _img_enlarged = _self.data('nsrc');
$('#enlarged').attr('src', _img_enlarged);
$('#modalEnlarged').modal('show');
modal.addEventListener('hidden.bs.modal', function() {
enlargedImg.src = '';
});
document.querySelectorAll('[data-popup]').forEach(function(element) {
element.addEventListener('click', function() {
const imgSrc = this.dataset.nsrc;
enlargedImg.src = imgSrc;
const bsModal = new bootstrap.Modal(modal);
bsModal.show();
});
});
});
</script>

3
templates/page-place-order.html
View File

@ -2,7 +2,8 @@
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}">
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
<link rel="stylesheet" href="{{ get_url(path='css/order-hardware.css', cachebust=true) }}">
{% endblock %}

1
templates/page.html
View File

@ -1,6 +1,7 @@
{% extends 'section.html' %}
{% block styles %}
{{ super() }}
<style>
h5 {
margin-bottom: 2rem!important;