wlxsp
/
test1
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Adds squoosh image minify build option 

Adds image minify webpack config for debugging
main
Eric Amodio 2 years ago
parent
098f2b1d01
commit
04219219a7
4 changed files with 225 additions and 89 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -3
      package.json
  2. +101
    -0
      webpack.config.images.js
  3. +55
    -35
      webpack.config.js
  4. +64
    -51
      yarn.lock

+ 5
- 3
package.json View File

@ -10113,6 +10113,7 @@
"build:webviews": "webpack --mode development --config-name webviews",
"bundle": "webpack --mode production",
"clean": "npx rimraf .eslintcache* tsconfig*.tsbuildinfo",
"copy:images": "webpack --config webpack.config.images.js",
"lint": "eslint src/**/*.ts --fix",
"pack": "vsce package --yarn",
"pack-insiders": "yarn run patch-insiders && yarn run pack",
@ -10148,8 +10149,9 @@
"@types/node": "14.17.4",
"@types/sortablejs": "1.10.7",
"@types/vscode": "1.63.1",
"@typescript-eslint/eslint-plugin": "5.8.0",
"@typescript-eslint/parser": "5.8.0",
"@typescript-eslint/eslint-plugin": "5.8.1",
"@typescript-eslint/parser": "5.8.1",
"@squoosh/lib": "0.4.0",
"ansi-regex": "6.0.1",
"circular-dependency-plugin": "5.2.2",
"clean-webpack-plugin": "4.0.0",
@ -10168,7 +10170,7 @@
"fork-ts-checker-webpack-plugin": "6.5.0",
"html-loader": "3.0.1",
"html-webpack-plugin": "5.5.0",
"image-minimizer-webpack-plugin": "3.1.2",
"image-minimizer-webpack-plugin": "3.2.0",
"imagemin": "8.0.1",
"imagemin-webp": "7.0.0",
"json5": "2.2.0",

+ 101
- 0
webpack.config.images.js View File

@ -0,0 +1,101 @@
//@ts-check
/** @typedef {import('webpack').Configuration} WebpackConfig **/
'use strict';
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports =
/**
* @param {{ useOptimization?: boolean; squoosh?: boolean } | undefined } env
* @param {{ mode: 'production' | 'development' | 'none' | undefined }} argv
* @returns { WebpackConfig }
*/
function (env, argv) {
const mode = argv.mode || 'none';
const basePath = path.join(__dirname, 'src', 'webviews', 'apps');
env = {
useOptimization: false,
squoosh: false,
...env,
};
/** @type ImageMinimizerPlugin.Generator<any> */
// @ts-ignore
let imageGeneratorConfig = env.squoosh
? {
type: 'asset',
implementation: ImageMinimizerPlugin.squooshGenerate,
options: {
encodeOptions: {
webp: {
// quality: 90,
lossless: 1,
},
},
},
}
: {
type: 'asset',
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
[
'imagemin-webp',
{
lossless: true,
nearLossless: 0,
quality: 100,
method: mode === 'production' ? 4 : 0,
},
],
],
},
};
/** @type WebpackConfig['plugins'] */
const plugins = [
new CopyPlugin({
patterns: [
{
from: path.posix.join(basePath.replace(/\\/g, '/'), 'images', 'settings', '*.png'),
to: __dirname.replace(/\\/g, '/'),
},
],
}),
];
if (!env.useOptimization) {
plugins.push(
new ImageMinimizerPlugin({
deleteOriginalAssets: true,
generator: [imageGeneratorConfig],
}),
);
}
/** @type WebpackConfig */
const config = {
name: 'images',
context: basePath,
entry: {},
mode: mode,
plugins: plugins,
};
if (env.useOptimization) {
config.optimization = {
minimize: true,
minimizer: [
new ImageMinimizerPlugin({
deleteOriginalAssets: true,
generator: [imageGeneratorConfig],
}),
],
};
}
return config;
};

+ 55
- 35
webpack.config.js View File

@ -24,7 +24,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
module.exports =
/**
* @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; } | undefined } env
* @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
* @param {{ mode: 'production' | 'development' | 'none' | undefined; }} argv
* @returns { WebpackConfig[] }
*/
@ -35,6 +35,7 @@ module.exports =
analyzeBundle: false,
analyzeDeps: false,
esbuild: true,
squoosh: false,
...env,
};
@ -48,7 +49,7 @@ module.exports =
/**
* @param { 'node' | 'webworker' } target
* @param { 'production' | 'development' | 'none' } mode
* @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; }} env
* @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
* @returns { WebpackConfig }
*/
function getExtensionConfig(target, mode, env) {
@ -210,7 +211,7 @@ function getExtensionConfig(target, mode, env) {
/**
* @param { 'production' | 'development' | 'none' } mode
* @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; }} env
* @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
* @returns { WebpackConfig }
*/
function getWebviewsConfig(mode, env) {
@ -244,9 +245,40 @@ function getWebviewsConfig(mode, env) {
// @ts-ignore
cspHtmlPlugin.createNonce = () => '#{cspNonce}';
/**
* @type WebpackConfig['plugins'] | any
*/
/** @type ImageMinimizerPlugin.Generator<any> */
// @ts-ignore
let imageGeneratorConfig = env.squoosh
? {
type: 'asset',
implementation: ImageMinimizerPlugin.squooshGenerate,
options: {
encodeOptions: {
webp: {
// quality: 90,
lossless: 1,
},
},
},
}
: {
type: 'asset',
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
[
'imagemin-webp',
{
lossless: true,
nearLossless: 0,
quality: 100,
method: mode === 'production' ? 4 : 0,
},
],
],
},
};
/** @type WebpackConfig['plugins'] | any */
const plugins = [
new CleanPlugin(
mode === 'production'
@ -355,37 +387,17 @@ function getWebviewsConfig(mode, env) {
},
],
}),
new ImageMinimizerPlugin({
deleteOriginalAssets: true,
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
[
'imagemin-webp',
{
lossless: true,
nearLossless: 0,
quality: 100,
method: mode === 'production' ? 4 : 0,
},
],
],
},
// implementation: ImageMinimizerPlugin.squooshGenerate,
// options: {
// // @ts-ignore
// encodeOptions: {
// webp: {
// // quality: 90,
// lossless: 1,
// },
// },
// },
},
}),
];
if (mode !== 'production') {
plugins.push(
new ImageMinimizerPlugin({
deleteOriginalAssets: true,
generator: [imageGeneratorConfig],
}),
);
}
return {
name: 'webviews',
context: basePath,
@ -402,6 +414,14 @@ function getWebviewsConfig(mode, env) {
path: path.join(__dirname, 'dist', 'webviews'),
publicPath: '#{root}/dist/webviews/',
},
optimization: {
minimizer: [
new ImageMinimizerPlugin({
deleteOriginalAssets: true,
generator: [imageGeneratorConfig],
}),
],
},
module: {
rules: [
{

+ 64
- 51
yarn.lock View File

@ -139,6 +139,14 @@
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
"@squoosh/lib@0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@squoosh/lib/-/lib-0.4.0.tgz#31d18cb082c69e404589e2e281414d10f91e1668"
integrity sha512-O1LyugWLZjMI4JZeZMA5vzfhfPjfMZXH5/HmVkRagP8B70wH3uoR7tjxfGNdSavey357MwL8YJDxbGwBBdHp7Q==
dependencies:
wasm-feature-detect "^1.2.11"
web-streams-polyfill "^3.0.3"
"@tokenizer/token@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276"
@ -245,13 +253,13 @@
resolved "https://registry.yarnpkg.com/@types/vscode/-/vscode-1.63.1.tgz#b40f9f18055e2c9498ae543d18c59fbd6ef2e8a3"
integrity sha512-Z+ZqjRcnGfHP86dvx/BtSwWyZPKQ/LBdmAVImY82TphyjOw2KgTKcp7Nx92oNwCTsHzlshwexAG/WiY2JuUm3g==
"@typescript-eslint/eslint-plugin@5.8.0":
version "5.8.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.8.0.tgz#52cd9305ceef98a5333f9492d519e6c6c7fe7d43"
integrity sha512-spu1UW7QuBn0nJ6+psnfCc3iVoQAifjKORgBngKOmC8U/1tbe2YJMzYQqDGYB4JCss7L8+RM2kKLb1B1Aw9BNA==
"@typescript-eslint/eslint-plugin@5.8.1":
version "5.8.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.8.1.tgz#97dfaa39f38e99f86801fdf34f9f1bed66704258"
integrity sha512-wTZ5oEKrKj/8/366qTM366zqhIKAp6NCMweoRONtfuC07OAU9nVI2GZZdqQ1qD30WAAtcPdkH+npDwtRFdp4Rw==
dependencies:
"@typescript-eslint/experimental-utils" "5.8.0"
"@typescript-eslint/scope-manager" "5.8.0"
"@typescript-eslint/experimental-utils" "5.8.1"
"@typescript-eslint/scope-manager" "5.8.1"
debug "^4.3.2"
functional-red-black-tree "^1.0.1"
ignore "^5.1.8"
@ -259,60 +267,60 @@
semver "^7.3.5"
tsutils "^3.21.0"
"@typescript-eslint/experimental-utils@5.8.0":
version "5.8.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.8.0.tgz#0916ffe98d34b3c95e3652efa0cace61a7b25728"
integrity sha512-KN5FvNH71bhZ8fKtL+lhW7bjm7cxs1nt+hrDZWIqb6ViCffQcWyLunGrgvISgkRojIDcXIsH+xlFfI4RCDA0xA==
"@typescript-eslint/experimental-utils@5.8.1":
version "5.8.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.8.1.tgz#01861eb2f0749f07d02db342b794145a66ed346f"
integrity sha512-fbodVnjIDU4JpeXWRDsG5IfIjYBxEvs8EBO8W1+YVdtrc2B9ppfof5sZhVEDOtgTfFHnYQJDI8+qdqLYO4ceww==
dependencies:
"@types/json-schema" "^7.0.9"
"@typescript-eslint/scope-manager" "5.8.0"
"@typescript-eslint/types" "5.8.0"
"@typescript-eslint/typescript-estree" "5.8.0"
"@typescript-eslint/scope-manager" "5.8.1"
"@typescript-eslint/types" "5.8.1"
"@typescript-eslint/typescript-estree" "5.8.1"
eslint-scope "^5.1.1"
eslint-utils "^3.0.0"
"@typescript-eslint/parser@5.8.0":
version "5.8.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.8.0.tgz#b39970b21c1d7bc4a6018507fb29b380328d2587"
integrity sha512-Gleacp/ZhRtJRYs5/T8KQR3pAQjQI89Dn/k+OzyCKOsLiZH2/Vh60cFBTnFsHNI6WAD+lNUo/xGZ4NeA5u0Ipw==
"@typescript-eslint/parser@5.8.1":
version "5.8.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.8.1.tgz#380f5f1e596b540059998aa3fc80d78f0f9b0d0a"
integrity sha512-K1giKHAjHuyB421SoXMXFHHVI4NdNY603uKw92++D3qyxSeYvC10CBJ/GE5Thpo4WTUvu1mmJI2/FFkz38F2Gw==
dependencies:
"@typescript-eslint/scope-manager" "5.8.0"
"@typescript-eslint/types" "5.8.0"
"@typescript-eslint/typescript-estree" "5.8.0"
"@typescript-eslint/scope-manager" "5.8.1"
"@typescript-eslint/types" "5.8.1"
"@typescript-eslint/typescript-estree" "5.8.1"
debug "^4.3.2"
"@typescript-eslint/scope-manager@5.8.0":
version "5.8.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.8.0.tgz#2371095b4fa4c7be6a80b380f4e1b49c715e16f4"
integrity sha512-x82CYJsLOjPCDuFFEbS6e7K1QEWj7u5Wk1alw8A+gnJiYwNnDJk0ib6PCegbaPMjrfBvFKa7SxE3EOnnIQz2Gg==
"@typescript-eslint/scope-manager@5.8.1":
version "5.8.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.8.1.tgz#7fc0604f7ade8833e4d42cebaa1e2debf8b932e4"
integrity sha512-DGxJkNyYruFH3NIZc3PwrzwOQAg7vvgsHsHCILOLvUpupgkwDZdNq/cXU3BjF4LNrCsVg0qxEyWasys5AiJ85Q==
dependencies:
"@typescript-eslint/types" "5.8.0"
"@typescript-eslint/visitor-keys" "5.8.0"
"@typescript-eslint/types" "5.8.1"
"@typescript-eslint/visitor-keys" "5.8.1"
"@typescript-eslint/types@5.8.0":
version "5.8.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.8.0.tgz#e7fa74ec35d9dbe3560d039d3d8734986c3971e0"
integrity sha512-LdCYOqeqZWqCMOmwFnum6YfW9F3nKuxJiR84CdIRN5nfHJ7gyvGpXWqL/AaW0k3Po0+wm93ARAsOdzlZDPCcXg==
"@typescript-eslint/types@5.8.1":
version "5.8.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.8.1.tgz#04c6b49ebc8c99238238a6b8b43f2fc613983b5a"
integrity sha512-L/FlWCCgnjKOLefdok90/pqInkomLnAcF9UAzNr+DSqMC3IffzumHTQTrINXhP1gVp9zlHiYYjvozVZDPleLcA==
"@typescript-eslint/typescript-estree@5.8.0":
version "5.8.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.8.0.tgz#900469ba9d5a37f4482b014ecce4a5dbb86cb4dd"
integrity sha512-srfeZ3URdEcUsSLbkOFqS7WoxOqn8JNil2NSLO9O+I2/Uyc85+UlfpEvQHIpj5dVts7KKOZnftoJD/Fdv0L7nQ==
"@typescript-eslint/typescript-estree@5.8.1":
version "5.8.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.8.1.tgz#a592855be688e7b729a1e9411d7d74ec992ed6ef"
integrity sha512-26lQ8l8tTbG7ri7xEcCFT9ijU5Fk+sx/KRRyyzCv7MQ+rZZlqiDPtMKWLC8P7o+dtCnby4c+OlxuX1tp8WfafQ==
dependencies:
"@typescript-eslint/types" "5.8.0"
"@typescript-eslint/visitor-keys" "5.8.0"
"@typescript-eslint/types" "5.8.1"
"@typescript-eslint/visitor-keys" "5.8.1"
debug "^4.3.2"
globby "^11.0.4"
is-glob "^4.0.3"
semver "^7.3.5"
tsutils "^3.21.0"
"@typescript-eslint/visitor-keys@5.8.0":
version "5.8.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.8.0.tgz#22d4ed96fe2451135299239feedb9fe1dcec780c"
integrity sha512-+HDIGOEMnqbxdAHegxvnOqESUH6RWFRR2b8qxP1W9CZnnYh4Usz6MBL+2KMAgPk/P0o9c1HqnYtwzVH6GTIqug==
"@typescript-eslint/visitor-keys@5.8.1":
version "5.8.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.8.1.tgz#58a2c566265d5511224bc316149890451c1bbab0"
integrity sha512-SWgiWIwocK6NralrJarPZlWdr0hZnj5GXHIgfdm8hNkyKvpeQuFyLP6YjSIe9kf3YBIfU6OHSZLYkQ+smZwtNg==
dependencies:
"@typescript-eslint/types" "5.8.0"
"@typescript-eslint/types" "5.8.1"
eslint-visitor-keys "^3.0.0"
"@vscode/codicons@0.0.27":
@ -876,9 +884,9 @@ camelcase@^6.2.0:
integrity sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA==
caniuse-lite@^1.0.30001286:
version "1.0.30001292"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz#4a55f61c06abc9595965cfd77897dc7bc1cdc456"
integrity sha512-jnT4Tq0Q4ma+6nncYQVe7d73kmDmE9C3OGTx3MvW7lBM/eY1S1DZTMBON7dqV481RhNiS5OxD7k9JQvmDOTirw==
version "1.0.30001294"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz#4849f27b101fd59ddee3751598c663801032533d"
integrity sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==
caw@^2.0.0, caw@^2.0.1:
version "2.0.1"
@ -1482,9 +1490,9 @@ duplexer@^0.1.2:
integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
electron-to-chromium@^1.4.17:
version "1.4.28"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.28.tgz#fef0e92e281df6d568f482d8d53c34ca5374de48"
integrity sha512-Gzbf0wUtKfyPaqf0Plz+Ctinf9eQIzxEqBHwSvbGfeOm9GMNdLxyu1dNiCUfM+x6r4BE0xUJNh3Nmg9gfAtTmg==
version "1.4.29"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.29.tgz#a9b85ab888d0122124c9647c04d8dd246fae94b6"
integrity sha512-N2Jbwxo5Rum8G2YXeUxycs1sv4Qme/ry71HG73bv8BvZl+I/4JtRgK/En+ST/Wh/yF1fqvVCY4jZBgMxnhjtBA==
emoji-regex@^8.0.0:
version "8.0.0"
@ -2569,10 +2577,10 @@ ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
image-minimizer-webpack-plugin@3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/image-minimizer-webpack-plugin/-/image-minimizer-webpack-plugin-3.1.2.tgz#853fddb29f3da3a9325998fadeae54f9535ccad7"
integrity sha512-HM70z4fo2JyZeHYyJKtotaMWcbody1bWob53mDAkpieOjT7KkJzwQzIHWZP/WZ/gMldKO4QWzZf3/cBIk1iA2A==
image-minimizer-webpack-plugin@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/image-minimizer-webpack-plugin/-/image-minimizer-webpack-plugin-3.2.0.tgz#5bdce0d52a4cd712cab0d1b3fc60c21e3baba5f8"
integrity sha512-KhRMD100JCY1z54hQLsVT/ek9CAg6JOD/0vNM+HX0MCtQnHcgx+ZBiJSjgAloMCBUGrHeu2dSSjqkyxNsIK5UA==
dependencies:
schema-utils "^4.0.0"
serialize-javascript "^6.0.0"
@ -4858,6 +4866,11 @@ vsce@2.5.3:
yauzl "^2.3.1"
yazl "^2.2.2"
wasm-feature-detect@^1.2.11:
version "1.2.11"
resolved "https://registry.yarnpkg.com/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz#e21992fd1f1d41a47490e392a5893cb39d81e29e"
integrity sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w==
watchpack@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"

Write Preview
Loading…
Cancel
Save