Compress image, so the final binary data will be smaller, reduce memory usage in runtime.

This commit is contained in:
NI
2019-08-14 12:07:12 +08:00
parent e6c68194ad
commit dee9a66800
3 changed files with 337 additions and 931 deletions

1238
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -3,7 +3,9 @@
"version": "0.0.0", "version": "0.0.0",
"description": "Sshwifty Web Front-end Project", "description": "Sshwifty Web Front-end Project",
"main": "", "main": "",
"dependencies": {}, "dependencies": {
"imagemin-webpack-plugin": "^2.4.2"
},
"devDependencies": { "devDependencies": {
"@babel/core": "^7.5.5", "@babel/core": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.5.5", "@babel/plugin-transform-runtime": "^7.5.5",
@@ -24,7 +26,6 @@
"html-loader": "^0.5.5", "html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"html-webpack-template": "^6.2.0", "html-webpack-template": "^6.2.0",
"image-webpack-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.5.0", "mini-css-extract-plugin": "^0.5.0",
"mocha": "^6.2.0", "mocha": "^6.2.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",

View File

@@ -25,6 +25,7 @@ const webpack = require("webpack"),
VueLoaderPlugin = require("vue-loader/lib/plugin"), VueLoaderPlugin = require("vue-loader/lib/plugin"),
WebappWebpackPlugin = require("webapp-webpack-plugin"), WebappWebpackPlugin = require("webapp-webpack-plugin"),
ManifestPlugin = require("webpack-manifest-plugin"), ManifestPlugin = require("webpack-manifest-plugin"),
ImageminPlugin = require("imagemin-webpack-plugin").default,
CopyPlugin = require("copy-webpack-plugin"), CopyPlugin = require("copy-webpack-plugin"),
TerserPlugin = require("terser-webpack-plugin"), TerserPlugin = require("terser-webpack-plugin"),
{ CleanWebpackPlugin } = require("clean-webpack-plugin"); { CleanWebpackPlugin } = require("clean-webpack-plugin");
@@ -189,16 +190,7 @@ module.exports = {
}, },
{ {
test: /\.(gif|png|jpe?g|svg)$/i, test: /\.(gif|png|jpe?g|svg)$/i,
use: [ use: ["file-loader"]
"file-loader",
{
loader: "image-webpack-loader",
options: {
bypassOnDebug: true,
disable: true
}
}
]
}, },
{ {
test: /\.js$/, test: /\.js$/,
@@ -297,8 +289,15 @@ module.exports = {
developerURL: "https://vaguly.com", developerURL: "https://vaguly.com",
background: "#333", background: "#333",
theme_color: "#333", theme_color: "#333",
appleStatusBarStyle: "black",
icons: { icons: {
android: { offset: 10, overlayGlow: false, overlayShadow: true },
appleIcon: { offset: 10, overlayGlow: false },
appleStartup: { offset: 10, overlayGlow: false },
coast: false, coast: false,
favicons: { overlayGlow: false },
firefox: { offset: 20, overlayGlow: false },
windows: { offset: 10, overlayGlow: false },
yandex: false yandex: false
} }
} }
@@ -329,6 +328,12 @@ module.exports = {
removeEmptyElements: false removeEmptyElements: false
} }
}), }),
new ImageminPlugin({
disable: process.env.NODE_ENV !== "production",
pngquant: {
quality: "30-55"
}
}),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: "[hash]d.css", filename: "[hash]d.css",
chunkFilename: "[chunkhash]d.css" chunkFilename: "[chunkhash]d.css"