I'm using VUE CLI 3 and I need to remove the console.log and code comments from the production built. This is my Terser setup:
webpack.config.js in src folder
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {drop_debugger},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
],
},
};
My production workflow: Run npm run build -> cd dist -> npm run serve
The production build still outputs all console.log statements and shows code comments (<!-- -->).
What do I need to change to remove them?
First of all: make sure you are configuring Terser correctly:
terserOptions: {
ecma: 6,
compress: { drop_console: true },
output: { comments: false, beautify: false }
}
npm run serve
is usually a shortcut for:
vue-cli-service
vue-cli-service --help
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
lint lint and fix source files
So when your workflow is the above mentioned npm run build -> cd dist -> npm run serve then you are actually starting the dev server, which does not apply Terser.
In order to run the production build you can use any webserver capable of serving static content:
NodeJs examples:
npm install -g serve
serve -s dist
or
npm install -g node-static
static dist
Related
ERROR in static/js/10.1253c0b3f1b4afab1655.js from UglifyJs TypeError: "name.definition is not a function"
I got the following error when building for production. This is in a project that is using NPM webpack to build artifacts for a production server. The project is also using the UglifyJSPlugin in the following way:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
If uglifyjs-webpack-plugin is an old version, like 1.1.1, upgrade; in my case, to to 2.2.0, the latest version.
npm install uglifyjs-webpack-plugin#latest
The following change is also necessary, moving the warnings false outside of the compress block for the new version.
new UglifyJSPlugin({
uglifyOptions: {
warnings: false
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
This resolved my problem.
i have added devServer proxy target as
devServer: {
proxy: {
'^/': {
target: 'https://xmlpi-ea.dhl.com/',
ws: true,
changeOrigin: true
}
}
}
but it is not working when i make build with npm run build, is there a workaround for it?
This is for PRODUCTION not for development.
npm run build
If you are using vue-cli, you can spin you development server with
npm run serve
I'm building a Nuxt application. I've done some research but found no definitive solution.
Step 6/8 : EXPOSE 8080
---> Running in e5d36d6e86fe
Removing intermediate container e5d36d6e86fe
---> f655ef5cccc2
Step 7/8 : RUN npm run build
---> Running in f6445150af4c
> nuxt build
ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
ℹ Using components loader to optimize imports
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
ℹ Warming up worker pools
✔ Worker pools ready
ℹ Compiling Client
✔ Client: Compiled successfully in 1.00h
ℹ Compiling Server
✔ Server: Compiled successfully in 1.81m
Update Config
There are several experimental ways of improving build speed.
https://nuxtjs.org/api/configuration-build#parallel
https://nuxtjs.org/api/configuration-build#cache
https://nuxtjs.org/api/configuration-build#hardsource
build: {
// standalone: true,
analyze: false,
parallel: true,
cache: true,
hardSource: false,
splitChunks: {
layouts: false,
pages: false,
components: false,
},
html: {
minify: {
minifyCSS: false,
minifyJS: false
}
},
loaders: {
vue: {
prettify: false
}
},
transpile: ["#coreui/vue", "#coreui/utils", "#ag-grid-community/vue"],
extend(config, ctx) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? "source-map" : "inline-source-map";
}
}
}
Dockerfile
FROM node:14
COPY package*.json ./tmp/
RUN cd /tmp && npm install
RUN mkdir -p /usr/src/app && cp -a /tmp/node_modules /usr/src/app
WORKDIR /usr/src/app
COPY . .
#COPY package*.json ./
#RUN npm install
EXPOSE 8080
RUN npm run build
# RUN npm run generate
CMD [ "npm", "run", "start" ]
I'm updating a private node_module that we install in projects via bitbucket. The package has some overrides that get bundled up via webpack and that bundle is used directly (i.e. outside of the build tools used for the project I'm installing the module for).
I would like to fire the module's build command as a postinstall script so that when we install or update the module in the main project the bundle is rebuilt.
In the module's package.json I have this:
"scripts": {
"build": "webpack",
"dev": "webpack --watch",
"serve": "webpack-dev-server",
"postinstall": "npm run build"
},
and I have the following webpack.config.js file:
const path = require("path")
module.exports = {
mode: "development",
watch: false,
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
contentBase: "dist",
},
module: {
rules: [
{
test: /\.js/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
],
},
}
And I've confirmed that firing npm run build works just fine in the modules codebase, but when I go to update the module in the main codebase I get errors:
Webpack is blowing up on the option chaining which I thought would be handled by the babel loader in the module's webpack config.
I double checked my module's package.json file and it definitely has babel's presets in the regular dependencies and not the dev dependencies (i.e. it gets installed as part of the module install).
Am I doing something wrong here? It seems like if the same build process works
Make sure your exports in the package.json points to the sources in the dist:
"exports": {
".": "./dist/bundle.js"
},
https://nodejs.org/api/packages.html#package-entry-points
I'm trying to use sharp on a couple of AWS lambda#edge. The idea is to resize and cache an image when requested (see this).
I'm also using serverless with serverless-webpack to deploy the lambdas.
I can deploy the lambdas and everything goes well if I test them in AWS console.
However, these are lamda#edge and they will be used as cloudwatch request/response triggers. Therefore, the maximum lambda size is 1Mb.
My problem is I can't seem to get even near that size, the best I could achieve was 11.6Mb. And, it seems it's possible as seen in that first link.
This is the serverless configuration which results in 34.7Mb lambda:
custom:
webpack:
includeModules:
forceExclude:
- aws-sdk
packagerOptions:
scripts:
- rm -rf node_modules/sharp && docker run -v "$PWD":/var/task lambci/lambda:build-nodejs10.x npm install sharp
package:
exclude:
- .env
- .git/**
- .gitlab-ci.yml
- tests*
excludeDevDependencies: true
individually: true
And with this I got 11.6Mb:
custom:
webpack:
includeModules:
forceExclude:
- aws-sdk
packagerOptions:
scripts:
- npm rebuild sharp --target=10.15.0 --target_arch=x64 --target_platform=linux
package:
exclude:
- .env
- .git/**
- .gitlab-ci.yml
- tests*
excludeDevDependencies: true
individually: true
I've also played around with the package.exclude, but with no luck:
- node_modules/**
- '!node_modules/sharp/**'
and this is my webpack config:
const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');
const entries = {};
Object.keys(slsw.lib.entries).forEach(key => (entries[key] = ['./source-map-install.js', slsw.lib.entries[key]]));
module.exports = {
mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
entry: slsw.lib.entries,
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
},
// externals: ['sharp'], #tried that too
externals: [nodeExternals()],
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, '.webpack'),
filename: '[name].js',
},
target: 'node',
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.ts?$/, loader: 'ts-loader', options: { happyPackMode: true } },
],
},
};
When running locally, I can see what it's packaging... the node_modules folder has sharp and its dependencies, it seems. But the biggest folder is sharp.
I suspect I'm packaging stuff inside sharp folder that I don't need... but I can't seem to understand what.
Any help?
Thanks
UPDATE:
Reading more carefully, it seems the function where I need sharp (origin-response) size limit is 5Mb.
I just need to find a way to package sharp only for that function. Webpack seems to put it in both, even though I don't need it on the other function (viewer request).
Any help on this?
I ended up running a script in custom.webpack.packagerOptions.scripts that will ignore sharp where it's not needed.
This is the script I used:
custom:
webpack:
includeModules:
forceExclude:
- aws-sdk
packagerOptions: # uncomment this block if invoking locally
scripts:
- if [ -f "src/handlers/myfunction.js" ]; then rm -rf node_modules/sharp && docker run -v "$PWD":/var/task lambci/lambda:build-nodejs10.x npm install sharp; else rm -rf node_modules; fi