From 1a77079b7bfd514ebc22e973724bc08aad02bd27 Mon Sep 17 00:00:00 2001 From: notgne2 Date: Mon, 17 Feb 2020 22:18:19 -0700 Subject: [PATCH] dont do prerendering inside here anymore, automatically make webp images --- default.nix | 10 +++++++- package.json | 4 +-- pnpm-lock.yaml | 65 +++++++++++++++++++++++++++++++++++++---------- webpack.config.js | 54 +++++++++++++++------------------------ 4 files changed, 82 insertions(+), 51 deletions(-) diff --git a/default.nix b/default.nix index 61940aa..14d844d 100644 --- a/default.nix +++ b/default.nix @@ -1,4 +1,4 @@ -{ pkgs, google-chrome, symlinkJoin, stdenv, elmPackages, libjpeg, optipng, pngquant, ... }: +{ pkgs, google-chrome, symlinkJoin, stdenv, elmPackages, libjpeg, optipng, pngquant, libwebp, ... }: let pnpm2nix = pkgs.callPackage (builtins.fetchGit { @@ -65,6 +65,14 @@ let ln -s ${libjpeg}/bin/jpegtran $HOME/node_modules/jpegtran-bin/vendor/jpegtran ''; })); + + + cwebp-bin = (drv: drv.overrideAttrs(oldAttrs: { + buildPhase = '' + mkdir -p $HOME/node_modules/cwebp-bin/vendor/ + ln -s ${libwebp}/bin/cwebp $HOME/node_modules/cwebp-bin/vendor/cwebp + ''; + })); }; }; diff --git a/package.json b/package.json index 62e7a19..8cb2b33 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "favicons-webpack-plugin": "^1.0.2", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", + "imagemin-webp-webpack-plugin": "^3.3.1", "imagemin-webpack-plugin": "^2.4.2", "jsdom": "^15.2.1", - "prerender-spa-plugin": "^3.4.0", "style-loader": "^1.1.3", "tempy": "^0.3.0", "terser-webpack-plugin": "^2.3.5", @@ -27,4 +27,4 @@ "author": "notgne2", "license": "AGPL-3.0", "description": "" -} +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ae44938..9162e64 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,7 @@ dependencies: favicons-webpack-plugin: 1.0.2_webpack@4.41.6 html-loader: 0.5.5 html-webpack-plugin: 3.2.0_webpack@4.41.6 + imagemin-webp-webpack-plugin: 3.3.1 imagemin-webpack-plugin: 2.4.2 jsdom: 15.2.1 prerender-spa-plugin: 3.4.0 @@ -108,7 +109,7 @@ packages: '@jimp/custom': 0.5.4 '@jimp/utils': 0.5.0 core-js: 2.6.11 - jpeg-js: 0.3.6 + jpeg-js: 0.3.7 dev: false peerDependencies: '@jimp/custom': '>=0.3.5' @@ -1927,7 +1928,7 @@ packages: icss-utils: 4.1.1 loader-utils: 1.2.3 normalize-path: 3.0.0 - postcss: 7.0.26 + postcss: 7.0.27 postcss-modules-extract-imports: 2.0.0 postcss-modules-local-by-default: 3.0.2 postcss-modules-scope: 2.1.1 @@ -2022,6 +2023,18 @@ packages: node: '>=0.10.0' resolution: integrity: sha1-mI3zP+qxke95mmE2nddsF635V+o= + /cwebp-bin/5.1.0: + dependencies: + bin-build: 3.0.0 + bin-wrapper: 4.1.0 + logalot: 2.1.0 + dev: false + engines: + node: '>=6' + hasBin: true + requiresBuild: true + resolution: + integrity: sha512-BsPKStaNr98zfxwejWWLIGELbPERULJoD2v5ijvpeutSAGsegX7gmABgnkRK7MUucCPROXXfaPqkLAwI509JzA== /cyclist/1.0.1: dev: false resolution: @@ -2082,7 +2095,7 @@ packages: integrity: sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M= /decompress-response/4.2.1: dependencies: - mimic-response: 2.0.0 + mimic-response: 2.1.0 dev: false engines: node: '>=8' @@ -3868,7 +3881,7 @@ packages: integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== /icss-utils/4.1.1: dependencies: - postcss: 7.0.26 + postcss: 7.0.27 dev: false engines: node: '>= 6' @@ -3950,6 +3963,23 @@ packages: node: '>=6' resolution: integrity: sha512-+iGJFaPIMx8TjFW6zN+EkOhlqcemdL7F3N3Y0wODvV2kCUBuUtZK7DRZc1+Zfu4U2W/lTMUyx2G8YMOrZntIWg== + /imagemin-webp-webpack-plugin/3.3.1: + dependencies: + imagemin: 6.1.0 + imagemin-webp: 5.1.0 + dev: false + resolution: + integrity: sha512-9AZE61DfOVOa8Yl4kiezTEBN3O9cmTbpvAueOAoxrU3lvaQWgDgfl7Z8CLHI+tglwbt//e5/RbF2ZQu5TKHDGQ== + /imagemin-webp/5.1.0: + dependencies: + cwebp-bin: 5.1.0 + exec-buffer: 3.2.0 + is-cwebp-readable: 2.0.1 + dev: false + engines: + node: '>=6' + resolution: + integrity: sha512-BsPTpobgbDPFBBsI3UflnU/cpIVa15qInEDBcYBw16qI/6XiB4vDF/dGp9l4aM3pfFDDYqR0mANMcKpBD7wbCw== /imagemin-webpack-plugin/2.4.2: dependencies: '@types/imagemin-gifsicle': 5.2.0 @@ -4173,6 +4203,12 @@ packages: node: '>= 0.4' resolution: integrity: sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q== + /is-cwebp-readable/2.0.1: + dependencies: + file-type: 4.4.0 + dev: false + resolution: + integrity: sha1-r7k7DAq9CiUQEBauM66ort+SbSY= /is-data-descriptor/0.1.4: dependencies: kind-of: 3.2.2 @@ -4498,10 +4534,10 @@ packages: dev: false resolution: integrity: sha1-U+RI7J0mPmgyZkZ+lELSxaLvVII= - /jpeg-js/0.3.6: + /jpeg-js/0.3.7: dev: false resolution: - integrity: sha512-MUj2XlMB8kpe+8DJUGH/3UJm4XpI8XEgZQ+CiHDeyrGoKPdW/8FJv6ku+3UiYm5Fz3CWaL+iXmD8Q4Ap6aC1Jw== + integrity: sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ== /jpegtran-bin/4.0.0: dependencies: bin-build: 3.0.0 @@ -5073,12 +5109,12 @@ packages: node: '>=4' resolution: integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ== - /mimic-response/2.0.0: + /mimic-response/2.1.0: dev: false engines: node: '>=8' resolution: - integrity: sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ== + integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA== /min-document/2.19.0: dependencies: dom-walk: 0.1.1 @@ -6000,7 +6036,7 @@ packages: integrity: sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= /postcss-modules-extract-imports/2.0.0: dependencies: - postcss: 7.0.26 + postcss: 7.0.27 dev: false engines: node: '>= 6' @@ -6009,7 +6045,7 @@ packages: /postcss-modules-local-by-default/3.0.2: dependencies: icss-utils: 4.1.1 - postcss: 7.0.26 + postcss: 7.0.27 postcss-selector-parser: 6.0.2 postcss-value-parser: 4.0.2 dev: false @@ -6019,7 +6055,7 @@ packages: integrity: sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ== /postcss-modules-scope/2.1.1: dependencies: - postcss: 7.0.26 + postcss: 7.0.27 postcss-selector-parser: 6.0.2 dev: false engines: @@ -6029,7 +6065,7 @@ packages: /postcss-modules-values/3.0.0: dependencies: icss-utils: 4.1.1 - postcss: 7.0.26 + postcss: 7.0.27 dev: false resolution: integrity: sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg== @@ -6047,7 +6083,7 @@ packages: dev: false resolution: integrity: sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ== - /postcss/7.0.26: + /postcss/7.0.27: dependencies: chalk: 2.4.2 source-map: 0.6.1 @@ -6056,7 +6092,7 @@ packages: engines: node: '>=6.0.0' resolution: - integrity: sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA== + integrity: sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ== /prebuild-install/5.3.3: dependencies: detect-libc: 1.0.3 @@ -8499,6 +8535,7 @@ specifiers: favicons-webpack-plugin: ^1.0.2 html-loader: ^0.5.5 html-webpack-plugin: ^3.2.0 + imagemin-webp-webpack-plugin: ^3.3.1 imagemin-webpack-plugin: ^2.4.2 jsdom: ^15.2.1 prerender-spa-plugin: ^3.4.0 diff --git a/webpack.config.js b/webpack.config.js index 3468c46..197c6db 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,11 +1,10 @@ const path = require('path') const TerserPlugin = require('terser-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') -const PrerenderSPAPlugin = require('prerender-spa-plugin') -const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const CopyPlugin = require('copy-webpack-plugin') const { InjectManifest } = require('workbox-webpack-plugin') const ImageminPlugin = require('imagemin-webpack-plugin').default +const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin') const FaviconsWebpackPlugin = require('favicons-webpack-plugin') const { JSDOM } = require('jsdom') const tempy = require('tempy') @@ -18,8 +17,6 @@ const magicFile = (text) => { return p } -// const magicAppend = (orig, text, sep = '\n') => magicFile(fs.readFileSync(orig) + sep + text) - const jsMin = { mangle: true, compress: { @@ -50,37 +47,7 @@ const htmlMin = { sortClassName: true, } -prerenderOpts = (width, height, name) => ({ - outputDir: path.join(__dirname, 'dist', 'prerender', name), - staticDir: path.join(__dirname, 'dist'), - routes: ROUTES, - minify: htmlMin, - renderer: new Renderer({ - renderAfterTime: 300, - viewport: { - width: width, - height: height, - deviceScaleFactor: 1, - } - }), - postProcess(renderedRoute) { - const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' }) - dom.window.eval(` - const wandTarget = document.createElement('script') - wandTarget.src = '/wand.js' - document.body.appendChild(wandTarget) - `) - return { - ...renderedRoute, - html: dom.serialize(), - } - } -}) - const productionPlugins = [ - new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')), - new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')), - new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')), new InjectManifest({ importWorkboxFrom: 'local', swSrc: magicFile(` @@ -96,6 +63,25 @@ const productionPlugins = [ jpegtran: { progressive: true }, svgo: null, }), + new ImageminWebpWebpackPlugin({ + config: [{ + test: /\.jpe?g/, + options: { + force: true, + quality: 75 + } + }, { + test: /\.png/, + options: { + force: true, + lossless: true + } + }], + overrideExtension: false, + detailedLogs: false, + silent: true, + strict: true, + }), new FaviconsWebpackPlugin({ logo: path.join(__dirname, 'data', 'images', 'icon.png'), inject: false, // manually in our template for now cos its fuckd