terser-webpack-plugin
babel-plugin-lodash
terser-webpack-plugin | babel-plugin-lodash | |
---|---|---|
6 | 3 | |
1,924 | 1,957 | |
0.1% | - | |
6.6 | 0.0 | |
2 months ago | 11 months ago | |
JavaScript | JavaScript | |
MIT License | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
terser-webpack-plugin
-
Webpack npm run build with React Typescript
const path = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const TerserPlugin = require("terser-webpack-plugin"); module.exports = { // watch: true, mode: "production", entry: "./src/index.tsx", output: { filename: 'main.js', path: path.resolve(__dirname, 'build') }, optimization: { chunkIds: 'named', minimizer: [ new TerserPlugin({ parallel: true, terserOptions: { // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions }, }), new CssMinimizerPlugin(), ], }, plugins: [ new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html'), // template file filename: 'index.html', // output file }), new CleanWebpackPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', "@babel/preset-react"] } } }, { test: /\.css$/i, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'autoprefixer', { overrideBrowserslist: ['last 3 versions', 'ie >9'] }, ], ], }, }, }, ], }, { test: /\.scss$/i, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: "postcss-loader", options: { postcssOptions: { plugins: [ [ "autoprefixer", { overrideBrowserslist: ['last 3 versions', 'ie >9'] }, ], ], }, }, }, 'sass-loader' ], }, { test: /\.(svg|eot|woff|woff2|ttf)$/, use: ['file-loader'] }, { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/, options: { allowTsInNodeModules: true } } ] }, resolve: { extensions: ["*",".ts", ".tsx", ".js", "jsx"] }, }
-
Popular React Webpack Plugins for 2022
There are lots of options available with this plugin which you can check here.
- Is it fair to be skeptical of minification software, since they can potentially inject stuff?
-
Minimizing Webpack bundle size
Make sure Webpack is in production mode on release! Webpack applies a number of optimizations to your bundle, including minification with TerserWebpackPlugin if you’re using Webpack v4 or above. If not, you’ll have to install and add it manually. Other optimizations include omitting development-only code and using optimized assets.
-
is there any way to config webpack to generate single quoted code instead of double quoted code?
Specifically quote_mode in terser-webpack-plugin
-
My first public React 17 Boilerplate (with Webpack 5, Tailwind 2)
terser-webpack-plugin - Optimize and minimize JavaScript
babel-plugin-lodash
- Webpack tree shaking not working as I expected
-
Let's talk about Lodash
Alternatively, there is a Babel plugin that can do this for you. There is also a webpack plugin that will further optimize things.
-
Minimizing Webpack bundle size
Similar to babel-plugin-import, the babel-plugin-lodash plugin cherry picks the code we need to import from lodash. The parsed size of the entire lodash package is ~600KB, so we definitely don’t want everything.
What are some alternatives?
html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles
You-Dont-Need-Lodash-Underscore - List of JavaScript methods which you can use natively + ESLint Plugin
react-webpack-5-tailwind-2 - React 17 Boilerplate with Webpack 6, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
babel-plugin-import - Modularly import plugin for babel.
clean-webpack-plugin - A webpack plugin to remove your build folder(s) before building
webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
mini-css-extract-plugin - Lightweight CSS extraction plugin
moment-timezone-data-webpack-plugin - Reduce moment-timezone data size for a webpack build
UglifyJS2 - JavaScript parser / mangler / compressor / beautifier toolkit
lodash - A modern JavaScript utility library delivering modularity, performance, & extras.
proposal-pipeline-operator - A proposal for adding a useful pipe operator to JavaScript.