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

View File

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