Closed goforu closed 2 years ago
I tried to config in extendWebpack and chainWepack using terser plugin, but neither working...
const TerserPlugin = require('terser-webpack-plugin')
extendWebpack (cfg) {
cfg.optimization.minimize = true
cfg.optimization.minimizer.push(new TerserPlugin({
extractComments: false,
minify: TerserPlugin.uglifyJsMinify,
terserOptions: {
format: {
comments: false,
},
compress: {
drop_console: true,
}
}
}))
}
chainWebpack (chain) {
chain.optimization.minimizer('terser').use(TerserPlugin, [{
terserOptions: {
output: {
comments: false
},
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
}
}
}])
}
Have you tried with the:
uglifyOptions: {
compress: {
drop_console: true
}
},
Have you tried with the:
uglifyOptions: { compress: { drop_console: true } },
yes, I tried, no working either...
Okay, in that case, please provide output of quasar info
and the contents of your quasar.conf.js
file so it can be debugged easier.
Operating System - Darwin(20.6.0) - darwin/x64 NodeJs - 16.6.1
Global packages NPM - 7.20.3 yarn - 1.22.11 @quasar/cli - 1.0.5 @quasar/icongenie - 2.4.0 cordova - 10.0.0
Important local packages quasar - 2.2.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 3.1.8 -- Quasar Framework local CLI @quasar/extras - 1.11.4 -- Quasar Framework fonts, icons and animations eslint-plugin-quasar - 1.0.0 -- Official ESLint plugin for Quasar vue - 3.2.20 -- The progressive JavaScript framework for buiding modern web UI. vue-router - 4.0.12 vuex - 4.0.2 -- state management for Vue.js electron - 7.3.3 -- Build cross platform desktop apps with JavaScript, HTML, and CSS electron-packager - Not installed electron-builder - Not installed @babel/core - 7.15.5 -- Babel compiler core. webpack - 5.59.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff. webpack-dev-server - 4.4.0 -- Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - 6.3.0 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache. register-service-worker - 1.7.2 -- Script for registering service worker, with hooks typescript - 4.4.2 -- TypeScript is a language for application scale JavaScript development @capacitor/core - 3.2.5 -- Capacitor: Cross-platform apps with JavaScript and the web @capacitor/cli - 3.2.5 -- Capacitor: Cross-platform apps with JavaScript and the web @capacitor/android - 3.2.5 -- Capacitor: Cross-platform apps with JavaScript and the web @capacitor/ios - 3.2.5 -- Capacitor: Cross-platform apps with JavaScript and the web
Quasar App Extensions @quasar/quasar-app-extension-testing - 1.0.3 -- A Quasar App Extension for managing Test Harnesses @quasar/quasar-app-extension-testing-e2e-cypress - 1.0.0-beta.13 -- A Quasar App Extension for Cypress e2e @quasar/quasar-app-extension-testing-unit-jest - 3.0.0-alpha.4 -- A Quasar App Extension for running Jest tests
Networking Host - Joeys-MacBook-Pro.local en0 - 192.168.102.4
// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
const CopyWebpackPlugin = require('copy-webpack-plugin')
// const TerserPlugin = require('terser-webpack-plugin')
// beta only
// const LOCAL_PATH = '/statics/beta/'
// const LOCAL_PATH = '/hsql/dist/spa/'
// const extraBuild = process.env.NODE_ENV === 'production'
// ? {
// appBase: '',
// publicPath: LOCAL_PATH,
// assetsDir: LOCAL_PATH
// }
// : {}
module.exports = function (ctx) {
return {
supportTS: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/cli-documentation/boot-files
boot: [
// 'i18n',
'init',
'capacitor'
],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [
'app.scss'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v4',
'fontawesome-v5',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
// 'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
'material-icons-outlined',
'eva-icons'
],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
framework: {
iconSet: 'material-icons', // Quasar icon set
lang: 'en-US', // Quasar language pack
// Possible values for "all":
// * 'auto' - Auto-import needed Quasar components & directives
// (slightly higher compile time; next to minimum bundle size; most convenient)
// * false - Manually specify what to import
// (fastest compile time; minimum bundle size; most tedious)
// * true - Import everything from Quasar
// (not treeshaking Quasar; biggest bundle size; convenient)
all: 'auto',
components: [
'QAjaxBar',
'QVideo'
],
directives: [],
// Quasar plugins
plugins: [
'Cookies',
'Notify',
'AppFullscreen',
'Dialog'
// 'Dialog'
],
ripple: {
early: true
}
},
// https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
supportIE: false,
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: {
scopeHoisting: true,
vueRouterMode: 'history', // available values: 'hash', 'history'
showProgress: true,
gzip: false,
analyze: false,
// drop console
uglifyOptions: {
compress: {
drop_console: true
}
},
// Options below are automatically set depending on the env, set them if you want to override
// preloadChunks: false,
// extractCSS: false,
// ...extraBuild,
// https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
// publicPath: './',
// appBase: '',
extendWebpack (cfg) {
if (cfg.output) {
cfg.plugins.push(new CopyWebpackPlugin({
patterns: [{ from: './wTFg6cBrWb.txt', to: cfg.output.path }, { from: './MP_verify_2fJZiZCzjBnVRnZ2.txt', to: cfg.output.path }]
}))
}
// cfg.optimization.minimize = true
// cfg.optimization.minimizer.push(new TerserPlugin({
// extractComments: false,
// minify: TerserPlugin.uglifyJsMinify,
// terserOptions: {
// format: {
// comments: false,
// },
// compress: {
// drop_console: true,
// }
// }
// }))
// cfg.module.rules.push({
// enforce: 'pre',
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// exclude: /node_modules/,
// options: {
// formatter: require('eslint').CLIEngine.getFormatter('stylish')
// }
// })
},
chainWebpack (chain) {
// chain.optimization.minimizer('terser').use(TerserPlugin, [{
// terserOptions: {
// output: {
// comments: false
// },
// compress: {
// drop_console: true,
// drop_debugger: true,
// pure_funcs: ['console.log']
// }
// }
// }])
const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
// process.env.NODE_ENV === 'production' && chain.output.publicPath('./')
// return chain
}
},
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
devServer: {
host: '0.0.0.0',
https: false,
port: 80,
open: true, // opens browser window automatically
proxy: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
// target: 'http://localhost:3002',
target: 'http://101.34.136.209:3002',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
// animations: 'all', // --- includes all animations
// https://quasar.dev/options/animations
animations: [
'fadeIn',
'fadeOut',
'flash',
'pulse',
'fadeInUp',
'fadeOutLeft',
'shakeY',
'slideInUp',
'slideInLeft',
'slideInRight',
'bounce',
'shakeX',
'jackInTheBox'
// 'slideInLeft',
],
// https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
ssr: {
pwa: false
},
// https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
pwa: {
workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
workboxOptions: {
skipWaiting: true,
clientsClaim: true
}, // only for GenerateSW
manifest: {
name: '话树趣聊',
short_name: '趣聊',
description: '搞笑对话收集站',
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3',
icons: [
{
src: 'statics/icons/icon-128x128.png',
sizes: '128x128',
type: 'image/png'
},
{
src: 'statics/icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'statics/icons/icon-256x256.png',
sizes: '256x256',
type: 'image/png'
},
{
src: 'statics/icons/icon-384x384.png',
sizes: '384x384',
type: 'image/png'
},
{
src: 'statics/icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
}
},
// Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
id: 'org.cordova.quasar.app'
},
// Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true
},
// Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
electron: {
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'chatflow'
},
// More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
nodeIntegration: true,
extendWebpack (cfg) {
// do something with Electron main process Webpack cfg
// chainWebpack also available besides this extendWebpack
}
}
}
}
Hi,
Cannot reproduce. Applied quasar.conf > build > uglifyOptions:
uglifyOptions: {
compress: {
drop_console: true
}
},
Added a console.info('...')
somewhere in src. Then built for production and the console.info() instruction was indeed removed.
Also noticed something wrong with your quasar.conf. There's a ripple: { early: true }
but that should be under the:
framework: {
config: {
ripple: ....
Furthermore, quasar.conf > framework > "all" prop has been removed long time ago and has no purpose nowadays.
Might be worth checking out the quasar.conf.js settings again. https://quasar.dev/quasar-cli/quasar-conf-js#property-framework
THANKS for your detailed information, appreciated!!! After hours of debugging, I finally found where the problem is.
My project has the dependency node-polyfill-webpack-plugin
for crypto
lib. When I run quasar build
, it will firstly transcript console
to random letter such as
Y.info('drop test')
In that case, Uglify can't find console key words to drop, as a result issue remains.
So my following question is How can I set minimizer
work before node-polyfill-webpack-plugin
Here is my solution, hoping to help people needed.
Adding excludeAliases
to tell Ployfill
ignore console.
const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin, [{ excludeAliases: ['console'] }])
Describe the bug In quasar.conf.js file, I use uglifyOptions to drop console log in production, but since I upgraded to webpack 5, it's no longer working. There's my config: