Cdn or Webpack

Question

Webpack bundle files keep on building from time to time.which reduces the performance of a web app. Are there other methods on how to deal with these large bundle files or I go with the cdn

Answer 1

UglifyJS is a JavaScript minifier and tree shaking tool that can be used with Webpack to remove unused code from your bundle.

When UglifyJS is run as part of your build process, it will analyze your code and remove any functions or variables that are not actually used in your application.

Answer 2

Use tree shaking technique that removes unused code from your bundle. Here is an example of Webpack configuration:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
mode: 'production', // Enable tree shaking by setting mode to "production"
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
minimizer: [
new UglifyJSPlugin({
test: /\.js(\?.*)?$/i, // Only minify JavaScript files
})
]
},
plugins: [
new CleanWebpackPlugin() // Clean the output directory before building
]
};

This configuration will use UglifyJS to minify and tree shake the code in your bundle.js file. The mode option is set to "production" to enable tree shaking, and the CleanWebpackPlugin is used to clean the output directory before building to ensure that only the necessary files are included in bundle

Answer 3

</CODER> thank you. I will go with cdn because the web performance of my app has been terrible

Answer 4

Thank you so much Sir Calviղ