Comments (10)
@boopathi Coming here from the README, and reading through the comments in this thread, I am still unclear on what strategy is recommended? Since the plugin has seen changes in the year since the thread started, could you suggest your current recommendations? Thank you!
from babel-minify-webpack-plugin.
@boopathi There is a confusion..
This used to work as of version "babili-webpack-plugin": "0.0.11". It has stopped working now. I don't want to have .babelrc file and trying with this also doesn't help
Below works.
new BabiliPlugin({
mangle: { 'topLevel': true },
deadcode: true
}),
But it doesn't conform to the README.md
What's the correct way of using it as per latest version? Can you please help!
from babel-minify-webpack-plugin.
The defaults are work fine and the why section of the readme explains the benefits of doing the minification at the end (works on the entire output and uses ES6 parsing). Below is an example of what we run to generate an optimized bundle while including all the polyfills for the minimum browsers you want to support:
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const BabelMinifyPlugin = require('babel-minify-webpack-plugin');
module.exports = (env) => {
return [
{
context: __dirname,
entry: { app: [path.join(__dirname, 'index.js')] },
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: ['babel-loader'] },
]
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js'
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new BabelMinifyPlugin()
]
}
];
};
.babelrc
{
"presets": [
[
"env",
{
"targets": {
"browsers": [ "safari 10", "ie 11", "ios 9" ]
},
"modules": false,
"useBuiltIns": true
}
]
],
"plugins": [
"transform-runtime"
],
"comments": false
}
Include the statement import 'babel-polyfill';
in your code (only once, like in your entry script file) and Babel will take care of the rest by adding the appropriate polyfills for all the browser requirements you have, and then bundling and minifying the entire output as a whole.
Note that this will include polyfills you might not be using because those are added to the global scope and won't be removed as part of the dead code elimination. If that's a big deal, then remove the import statement described above and add in the polyfills manually. You can use the debug output for babel minify to get a list of polyfills that might be needed for your browser requirements.
from babel-minify-webpack-plugin.
babel/minify#162 is merged ..
from babel-minify-webpack-plugin.
Just for your information:
With babel/minify#162 shipped, we can now pass options to Babili through the babili
property like this:
new BabiliWebpackPlugin({
babili: {
presets: [
[
require('babel-preset-babili'),
{
mangle: { topLevel: true },
deadcode: false,
removeConsole: process.env.NODE_ENV === 'production',
},
],
],
plugins: [
'transform-inline-environment-variables',
],
},
}),
from babel-minify-webpack-plugin.
I've tried setting up my webpack plugin config as above, but I still end up with compiled code that is actually larger than just using uglify-webpack-plugin
... Any ideas of things I could try? I've tried lots of combinations of config/babelrc but each produces a build larger than that of uglify which doesn't seem right?
Currently this will produce bundles...
Uglify: 325.1kb
Bibili: 339.4kb
.babelrc
{
"presets": [
[
"es2015",
{
modules: false
}
],
"es2017",
"react",
"stage-0",
],
"plugins": [
"transform-object-assign"
],
"env": {
"production": {
"presets": ["babili"]
}
}
}
webpack.config.js
//...
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test : /\.js$|\.jsx$/,
exclude : [
/node_modules/,
/\.spec\.js$/
],
loaders : [
'babel-loader',
'eslint-loader'
],
},
],
},
plugins: [
new BabiliPlugin({
test: /\.js$|\.jsx$/,
babili: {
presets: [
[
require('babel-preset-babili'),
{
mangle: { topLevel: true },
deadcode: false,
removeConsole: true,
},
],
],
},
}),
],
//...
from babel-minify-webpack-plugin.
I'm having the same issue as @icd2k3, the plugin is not doing any basic minification (whitespace removal).
It does seem to be running, since I am using typescript so I need to pass test: /\.tsx?$/,
in the 2nd parameter for 'overrides' to get it to run without error.
I'm not trying to do any custom configurations, just get basic minification working. Any idea why it would run without error but fail to minify?
The files are React + es6 + typescript.
from babel-minify-webpack-plugin.
(I should add that I did not include a .babelrc file in my project since from your docs it seems like I can just used the options/overrides objects in the plugin.)
from babel-minify-webpack-plugin.
Yes for me the minify of variables and what not is happening but agree that white space not getting stripped
from babel-minify-webpack-plugin.
Is there really a reason to use this strategy?
So far, I have seen that basically every rule I leave enabled improved bundle size, even without node_modules
dependencies.
When would you need to optimize for compile time rather than bundle size?
from babel-minify-webpack-plugin.
Related Issues (20)
- Unusable release on npm HOT 3
- invalid option topLevel HOT 1
- Newest version not available via NPM / Yarn HOT 1
- Uncaught TypeError: Class constructor cannot be invoked without 'new' [bug] HOT 1
- Update packge.json to support babel-core@7-beta HOT 9
- In README it is said “falsy value to remove all comments”. Not quite true HOT 2
- error with sourcemaps HOT 35
- UnhandledPromiseRejectionWarning when building HOT 2
- Improve the minification speed HOT 1
- named functions excluded HOT 1
- Problem in strict-mode with ejs-templates HOT 1
- A joined array of ES6 template literals is minfied uncorrectly HOT 1
- "mangle.exclude" doesn't seem to exclude the namespaces HOT 5
- breaks bundling HOT 1
- "parallel" options to leverage multiple cores [feature request]
- Error: original.line and original.column are not numbers HOT 2
- Babel 7 Support HOT 13
- Banner comment is removed
- Js heap out of memory HOT 6
- Configuration with react HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-minify-webpack-plugin.