a little strange question, but how to remove comments from the file chunk-vendors.js? I mean, there are automatically placed licenses and other information about plugins, including the vue, vuex, vue-router.
Is there any parameter responsible for this? I’m tired of removing these lines manually after each build
I use vue-cli
Assuming Vue CLI 3 or newer, this is handled by the minimizer's (terser) output options. Specifically, set output.comments=false to exclude comments from the minified output.
Edit vue.config.js to include:
module.exports = {
chainWebpack: config => {
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.output = {
...args[0].terserOptions.output,
comments: false // exclude all comments from output
}
return args
})
}
}
Related
I tryed to replace momentjs in project on antdv, and find this advice:
"We also provide another implementation, which we provide with
antd-dayjs-webpack-plugin, replacing momentjs with Day.js directly
without changing a line of existing code. More info can be found at
antd-dayjs-webpack-plugin."
https://2x.antdv.com/docs/vue/faq
So then i tryed to do same steps like in instruction https://github.com/ant-design/antd-dayjs-webpack-plugin. But i just changed webpack-config.js on vue-config.js and in code:
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = {
plugins: [
new AntdDayjsWebpackPlugin()
]
}
// on
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = {
configureWebpack: (config) => {
config.plugins.push(
new AntdDayjsWebpackPlugin(),
);
}
}
But then i got mistake 502 Bad Gateway.
If i deleted configureWebpack mistake was still there. And then i deleted require and mistake was gone.
Also i found what in page with this plugin there was word about React but not about Vue.
So i had few questions:
Is it possible to use DayJs in antdv DatePickers? With plugins or any ways.
Is it mistake in FAQ? How i can tall about this issue (if it is)? I didnt found any method to communicate with them.
I want to use htmlWebpackPlugin.options.title in SFC template, is that doable?
Yes it's doable ...but other way around
You can use Environment Variables do define your app title
Then you can configure htmlWebpackPlugin to use this ENV variable as the value for title option
At the same same time, you can use use this variable in any client side JS (be it pure JS or SFC). Note that to use it inside the template, it's necessary to assign it
to the data first...
.env file
VUE_APP_TITLE=My App Title
vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = process.ENV.VUE_APP_TITLE
return args
})
}
}
SFC
data() {
return {
title: process.ENV.VUE_APP_TITLE
}
}
document.title will do, Michal's solution will do too in a verbose but more strict and flexible format, see which one works best for you.
I am seeking to better understand PWAs with React, and one topic I am getting stuck on is the __WB_MANIFEST.
I've found that this is required by the Workbox CLI, and is used for precaching files, which is great. It defaults to containing the list of static files built by React, and that makes sense to me.
But is this list customizable? What situations might I want to edit the C-R-A default value? And can I edit it in v4?
Relevant C-R-A doc: https://create-react-app.dev/docs/making-a-progressive-web-app/#customization
Yes, it's customizable, but not out-of-box in cra (proposal, unmerged PR). To config workbox without ejecting, you might want
react-app-rewired
// config-overrides.js
module.exports = function override(config, env) {
if (env === 'development') return config;
const workboxConfig = config.plugins.slice(-1)[0].config;
workboxConfig.exclude = [/.*\.txt/];
// other config...
return config;
};
Or customize-cra:
// config-overrides.js
module.exports = override(
adjustWorkbox(wb =>
Object.assign(wb, {
exclude: (wb.exclude || []).concat("index.html")
// other config...
})
);
);
What situations might I want to edit the C-R-A default value?
Just as examples above, mostly, when you want to exclude something in precache manifest.
I looked at an output file (e.g. app.4a7888d9.js) that the Vue CLI generated to see what actually got reduced and I saw that properties declared in the 'data' object, methods declared in the methods object, etc. retain their original name. Same with Vuex state properties.
I'm not trying to obfuscate my code entirely but I do use rather long descriptive names which could benefit of minification. Please don't hate, but an example of a worst case scenario of a property name I have is scheduledTransactionConditionActiveComponent
Is there a better way to achieve minification besides what the cli does by default ? If I should use a different package for this, is there one that's proven for vue?
Vue CLI uses terser-webpack-plugin for minification, and property mangling is disabled by default. You could enable it in your Vue config as follows:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.optimization.minimizer('terser').tap(args => {
const opts = args[0]
opts.terserOptions.mangle = {
...opts.terserOptions.mangle,
properties: true, // mangle all property names
}
return args
})
}
}
The Terser docs also recommend selective property mangling (e.g., by only applying it to names that match a regexp). For example, you could configure Terser to only mangle properties that end with an underscore:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.optimization.minimizer('terser').tap(args => {
const opts = args[0]
opts.terserOptions.mangle = {
...opts.terserOptions.mangle,
properties: {
regex: /_$/, // mangle property names that end with "_"
},
}
return args
})
}
}
Note: Although this works well for data props, this mangling does not work for component names (i.e., property names under components).
I'm using mirage to mock some data and I'd like to mock an <img> with the appropriate file.
The problem is that I will have to place the image in /public/assets and the images placed there will be deployed later on as well.
Is there a way to avoid this? I couldn't find a recommendation in the ember cli website (https://ember-cli.com/user-guide/#asset-compilation)
I found one addon that could do this (ember-test-assets), but I'd like to avoid installing extra addons as much as possible.
Thanks!
You can exclude files in ember-cli-build.js with some help of Broccoli
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const Funnel = require('broccoli-funnel');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
// Add options here
});
// Filter your test files in 'production'
if (EmberApp.env() === 'production') {
return new Funnel(app.toTree(), {
exclude: ['**/test-*'] // e.g. any file prefixxed with 'test-'
});
}
return app.toTree();
};
References:
EmberApp.env(): https://github.com/ember-cli/ember-cli/blob/d97d96aa016fbe8108c2d2744c9823a0ea086b94/lib/broccoli/ember-app.js#L469
broccoli-funnel: https://github.com/broccolijs/broccoli-funnel (see exclude)