I'm trying to reduce the output size of my application's JS bundle and looking around these are the plugins that I got so far to help me on this task:
config.plugins = [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
new ExtractTextPlugin({ filename: "bundle.css" }),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true,
},
output: {
comments: false,
screw_ie8: true,
},
mangle: {
screw_ie8: true,
},
sourceMap: false,
minimize: true
}),
new LodashModuleReplacementPlugin({ 'collections': true }),
new DuplicatePackageCheckerPlugin()
];
I also set devtool to undefined for production.
And this is my .babelrc where I'm also doing some optimisations:
{
"presets": [
["es2015", { "es2015": { "loose": true, "modules": false}}],
"react",
"stage-0",
],
"env": {
"development": {
"presets": ["react"]
},
"production": {
"plugins": [
["transform-react-remove-prop-types", {
"mode": "wrap",
}]
]
}
},
"plugins": ["lodash"]
}
Is there any other thing I can do? The bundle has been reduced a lot but still quite big.
Related
I am creating a design system library with rollup and React 17.0.1, unfortunatelly I am getting this error when I use the library
Error: Can't resolve 'react/jsx-runtime'
The rollup file is this
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
exports: "auto",
sourcemap: false,
preserveModules: false
},
{
file: packageJson.module,
format: 'esm',
sourcemap: false
}
],
plugins: [
svgr(),
json(),
url(),
peerDepsExternal(),
resolve({
jsnext: true,
main: true,
browser: true
}),
babel({
babelrc: true,
exclude: 'node_modules/**',
presets: [
["#babel/preset-react", { runtime: "automatic" }],
]
}),
commonjs({
include: "node_modules/**",
namedExports: {
'styled-components': [ 'styled', 'css', 'ThemeProvider' ],
"react/jsx-runtime": ["jsx", "jsxs", "Fragment"],
"react/jsx-dev-runtime": ["jsxDEV", "Fragment"]
}
}),
typescript({ useTsconfigDeclarationDir: true }),
postcss(),
progress(),
visualizer({})
],
external: [...Object.keys(packageJson.peerDependencies || {})]
},
{
input: 'types/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: "esm" }],
external: [/\.css$/],
plugins: [dts()],
},
]
I looked for lots of solutions but I cannot find any good one... may you help me? Thanks
Lorenzo
It may help. "#rollup/plugin-node-resolve" plugin.
resolve({ extensions: [".js", ".jsx"] })
(tsx and ts if you are using typescript)
please let me know if it didnt help :)
I'm trying to turn off minification during the production build process. This is where I'm currently at in my webpack.mix.js file. However, nothing I've tried is working so far. What is the best way to do this?
webpack.mix.js
let mix = require('laravel-mix');
mix
.options({
minimize:false,
uglify: {
uglifyOptions: {
warnings: false,
comments: false,
beautify: true,
minify: false,
minimize: false,
compress: {
drop_console: true,
minimize: false,
}
}
},
cssnano:false,
})
.js('src/js/app.js', 'assets/js/common.js')
.sass('src/scss/style.scss', '').options({processCssUrls: false});
if (mix.inProduction()) {
mix.options({
minimize: false,
uglify: {
uglifyOptions: {
warnings: false,
comments: false,
beautify: false,
minify: false,
minimize: false,
compress: {
drop_console: true,
minimize: false,
}
}
},
cssnano:false,
});
}
I want to achieve to have multiple default exports. For example, if a react app installs my package named {my-package} then, they should be be able to import like
import Add from {my-package}/Add;
import Multiply from {my-package}/Multiple;
I've tried with making multiple end points in rollup.config.js.
`
export default [
{
input: files,
output: [
{
format: 'cjs',
strict: false,
// file: pkg.main,
dir: pkg.main,
sourcemap: true,
exports: 'named'
},
{
format: 'esm',
strict: false,
dir: pkg.module,
sourcemap: true,
exports: 'named'
}
],
plugins: [
commonjs(),
nodePolyfills(),
nodeResolve({ browser: true }),
image(),
json(),
postcss({
config: {
path: './postcss.config.js'
},
extensions: ['.css', '.scss'],
minimize: true,
inject: {
insertAt: 'top'
},
plugins: [url({ url: 'inline', maxSize: 10, fallback: 'copy' })]
}),
babel({ exclude: 'node_modules/**', presets: ['#babel/preset-react'] }),
typescriptPlugin({
objectHashIgnoreUnknownHack: true,
tsconfig: './tsconfig.json'
}),
cleaner({ targets: ['./dist/'] })
],
external: [
'react',
'react-dom',
'js-beautify',
'next-themes',
'react-split',
'react-codemirror2',
'react-responsive-modal',
'pinterpolate'
]
}
];
`
This is my rollup.config.js
Is it possible witn rollupjs?
I'm migrating my plugin from gulp to webpack 2 and I have an issue with the completed js file.
the file is minified & compressed.
My web pack config file :
// webpack.config.js
const webpack = require('webpack');
const config = {
entry: './src/ts/amt-rating.ts',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader?tsconfig=tsconfig.json'
}
]
},
plugins:[
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
})
]
}
//if production
if (process.env.NODE_ENV === 'production') {
config.output = {
filename: 'dist/js/amt-rating.min.js'
}
//uglify js options
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
minimize: true
}
})
)
}
else{
config.output = {
filename: 'dist/js/amt-rating.js'
}
config.devtool = "#cheap-module-source-map"
}
module.exports = config;
And here my tsconfig file :
{
"compilerOptions": {
"target": "es5",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
},
"include": [
"src/ts/*.ts"
],
"exclude": [
"node_modules"
]
}
I wan't to compile my typescript into a very simple javascript file without any dependencies.
This enables minification and compression:
//uglify js options
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
minimize: true
}
})
)
and is set to run if NODE_ENV is set to production. Make sure you have set it to development to get the not minified version.
I'm using rollup to build a module from my project, and it's not including regeneratorRuntime. What am I missing here?
module.exports = {
external: [],
entry: './src/appProxypass/index.js',
dest: './packages/proxypass-app/index.js',
format: 'cjs',
plugins: [
require('rollup-plugin-commonjs')({
}),
require('rollup-plugin-babel')({
babelrc: false,
runtimeHelpers: true,
// externalHelpers: true,
'presets': [
'es2015-rollup',
'stage-2'
],
'plugins': [
'transform-async-to-generator',
'syntax-async-functions',
'transform-flow-strip-types',
'transform-class-properties'
],
exclude: 'node_modules/**'
}),
require('rollup-plugin-cleanup')()
]
}