https://minify-js.com/component---src-templates-blog-post-jsx-cont…y-js-with-terser-md-463f2aa55ed6fcb687c1.js

1"use strict";(self.webpackChunkminify_js=self.webpackChunkminify_js||[]).push([[90],{255:function(e,t,n){n.d(t,{A:function(){return k}});var l=n(8453),r=n(6540),a=(n(9800),n(6942)),c=n.n(a);const i=e=>{let{children:t,className:n}=e;return r.createElement("code",{className:c()("inline bg-gray-100 p-1",n)},t)};i.defaultProps={className:""};var o=i,s=n(7083),m=n(4490),p=n(424);const u={children:null},d=e=>{let{children:t}=e;return r.createElement("h2",{className:"typo-h2 mb-4 mt-6"},t)};d.defaultProps=u;const h=e=>{let{children:t}=e;return r.createElement("h3",{className:"typo-h3 mb-4"},t)};h.defaultProps=u;const E=e=>{let{children:t}=e;return r.createElement("h4",{className:"typo-h4 mb-4"},t)};E.defaultProps=u;const f=e=>{let{children:t}=e;return r.createElement("h5",{className:"typo-h5 mb-4"},t)};f.defaultProps=u;const b=e=>{let{children:t}=e;return r.createElement("h6",{className:"typo-h6 mb-4"},t)};b.defaultProps=u;const y=e=>{let{children:t}=e;return r.createElement("p",{className:"typo-body mb-4"},t)};y.defaultProps=u;const g=e=>{let{children:t}=e;return r.createElement(m.A,{className:"my-4"},t)};g.defaultProps=u;const v=e=>{let{children:t}=e;return r.createElement(m.A.Item,{className:"typo-body"},t)};v.defaultProps=u;const N=e=>{let{href:t,children:n}=e;return r.createElement(s.A,{to:t,className:"text-yellow-600"},n)};N.defaultProps={children:null,href:null};const w=e=>{let{children:t}=e;return r.createElement(r.Fragment,null,r.createElement(l.xA,{components:{h1:d,h2:d,h3:h,h4:E,h5:f,h6:b,p:y,ul:g,li:v,a:N,pre:p.A,code:o}},t))};w.defaultProps={children:null};var k=w},424:function(e,t,n){var l=n(6942),r=n.n(l),a=n(6540);n(9800);const c=e=>{let{children:t,className:n}=e;return a.createElement("code",{className:r()("block whitespace-pre bg-gray-100 p-4 overflow-x-auto my-4",n)},t)};c.defaultProps={className:""},t.A=c}

1,3401:function(e,t,n){var l=n(6540),r=n(7083);t.A=e=>{let{post:t}=e;return l.createElement(r.A,{to:t.slug},l.createElement("div",{className:"bg-yellow-300 relative pb-[56%]"},l.createElement("h3",{className:"typo-h3 absolute bottom-0 pb-4 px-4"},t.title)),l.createElement("div",{className:"px-4 pt-2"},l.createElement("p",{className:"typo-body"},t.description),l.createElement("p",{className:"typo-small text-gray-400 mt-2"},t.date)))}},4490:function(e,t,n){n.d(t,{A:function(){return u}});var l={};n.r(l),n.d(l,{bullet:function(){return i},check:function(){return o},list:function(){return s}});var r=n(6942),a=n.n(r),c=n(6540),i=(n(9800),"List-module--bullet--79317"),o="List-module--check--3950c",s="List-module--list--915c4";const m=e=>{let{children:t,className:n,type:r}=e;return c.createElement("ul",{className:a()(n,s,{[l[r]]:r})},t)};m.defaultProps={children:null,className:"",type:"check"};const p=e=>{let{children:t,className:n}=e;return c.createElement("li",{className:a()("mt-2 first:mt-0",n)},t)};p.defaultProps={children:null,className:null},m.Item=p;var u=m},7360:function(e,t,n){n.r(t),n.d(t,{default:function(){return u}});var l=n(8453),r=n(6540);function a(e){const t=Object.assign({p:"p",ol:"ol",li:"li",pre:"pre",code:"code",h2:"h2"},(0,l.RP)(),e.components);return r.createElement(r.Fragment,null,r.createElement(t.p,null,"Webpack is a powerful tool for bundling JavaScript, CSS, and other assets in modern web development. One important feature of Webpack is its ability to optimize and minify code to improve performance and reduce file size. Terser is a popular JavaScript minifier that can be used with Webpack to reduce the size of JavaScript files."),"\n",r.createElement(t.p,null,"Terser is a JavaScript parser and minifier that can remove unnecessary code, shorten variable names, and perform other optimizations to reduce the size of JavaScript files. Terser can be used with Webpack to minimize the size of JavaScript code in the final build."),"\n",r.createElement(t.p,null,"To set up Webpack to minify JavaScript files with Terser, you can follow these steps:"),"\n",r.createElement(t.ol,null,"\n",r.createElement(t.li,null,"Install Terser and Webpack via npm:"),"\n"),"\n",r.createElement(t.pre,null,r.createElement(t.code,null,"npm install terser webpack --save-dev\n")),"\n",r.createElement(t.ol,{start:"2"},"\n",r.createElement(t.li,null,"Configure Webpack to use Terser by adding the following code to your ",r.createElement(t.code,null,"webpack.config.js")," file:"),"\n"),"\n",r.createElement(t.pre,null,r.createElement(t.code,null,"const TerserPlugin = require('terser-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.min.js',\n    path: __dirname + '/dist',\n  },\n  optimization: {\n    minimize: true,\n    minimizer: [new TerserPlugin()],\n  },\n};\n")),"\n",r.createElement(t.p,null,"In the above example, we import the ",r.createElement(t.code,null,"TerserPlugin")," from the ",r.createElement(t.code,null,"terser-webpack-plugin")," module and add it to the ",r.createElement(t.code,null,"minimizer")," array in the ",r.createElement(t.code,null,"optimization")," object. This tells Webpack to use Terser to minimize the JavaScript code during the build process.\n3. Run webpack to build your project with the minified code:"),"\n",r.createElement(t.pre,null,r.createElement(t.code,null,"webpack --mode production\n")),"\n",r.createElement(t.p,null,"This will run Webpack in production mode and use Terser to minimize the JavaScript code. The output will be a minified ",r.createElement(t.code,null,"bundle.min.js")," file located in the ",r.createElement(t.code,null,"dist")," directory."),"\n",r.createElement(t.h2,null,"How to configure Terser minification options"),"\n",r.createElement(t.p,null,"Here’s an example of how to customize Terser options in the ",r.createElement(t.code,null,"webpack.config.js")," file:"),"\n",r.createElement(t.pre,null,r.createElement(t.code,null,"const TerserPlugin = require('terser-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.min.js',\n    path: __dirname + '/dist',\n  },\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new TerserPlugin({\n        terserOptions: {\n          compress: {\n            drop_console: true,\n          },\n          mangle: true,\n        },\n      }),\n    ],\n  },\n};\n")),"\n",r.createElement(t.p,null,"In the above example, we set the ",r.createElement(t.code,null,"drop_console")," option to true to remove any console statements in the code and the ",r.createElement(t.code,null,"mangle")," option to true to rename variables and functions. These options are passed to Terser via the ",r.createElement(t.code,null,"terserOptions")," object."),"\n",r.createElement(t.h2,null,"Conslusion"),"\n",r.createElement(t.p,null,"Using Webpack with Terser is a great way to optimize and reduce the size of your JavaScript code, resulting in faster page load times and improved user experience. With the step-by-step instructions and code examples provided in this tutorial, you should now have the knowledge you need to get started with Webpack and Terser. Remember to experiment with different Terser options to find the best configuration for your project. By implementing these techniques, you can ensure that your web application is fast and efficie

1nt, making it more appealing to users and search engines alike."))}var c=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.RP)(),e.components);return t?r.createElement(t,e,r.createElement(a,e)):a(e)},i=n(3401),o=n(255),s=n(7083),m=n(1744);n(9800);const p=e=>{let{data:t,pageContext:n,children:l}=e;const{post:a}=t,c=t.recommended.nodes;return r.createElement(r.Fragment,null,r.createElement(m.A,{title:a.meta.title,description:a.meta.description,image:a.meta.image.publicURL}),r.createElement("div",{className:"container-sm py-10 sm:py-20"},r.createElement("div",{className:"row"},r.createElement("div",{className:"col-full"},r.createElement("h1",{className:"typo-h1 mb-4"},a.title),r.createElement("div",{className:"mt-12"},r.createElement(o.A,null,l)),r.createElement("div",{className:"mt-12"},r.createElement("p",{className:"typo-small text-gray-600"},"Published on ",a.date," by ",a.authors[0].name),r.createElement("div",{className:"mt-4"},r.createElement(s.A,{to:"/blog/",className:"typo-small text-gray-600"},"← Back to blog"))),r.createElement("ul",{itemscope:"",itemtype:"https://schema.org/BreadcrumbList",className:"typo-small text-gray-600 mt-6"},r.createElement("li",{itemprop:"itemListElement",itemscope:"",itemtype:"https://schema.org/ListItem",className:"inline"},r.createElement(s.A,{itemprop:"item",to:"/",className:"mr-3"},r.createElement("span",{itemprop:"name"},"Home")),r.createElement("meta",{itemprop:"position",content:"1"}),r.createElement("span",{className:"mr-3"},"▸")),r.createElement("li",{itemprop:"itemListElement",itemscope:"",itemtype:"https://schema.org/ListItem",className:"inline"},r.createElement(s.A,{itemprop:"item",to:"/blog/",className:"mr-3"},r.createElement("span",{itemprop:"name"},"Blog")),r.createElement("meta",{itemprop:"position",content:"2"}),r.createElement("span",{className:"mr-3"},"▸")),r.createElement("li",{itemprop:"itemListElement",itemscope:"",itemtype:"http://schema.org/ListItem",className:"inline"},r.createElement("span",{itemprop:"name"},a.title),r.createElement("meta",{itemprop:"position",content:"3"})))))),r.createElement("section",{className:"py-10"},r.createElement("div",{className:"container-lg"},r.createElement("h2",{className:"typo-h2"},"Similar blogs"),r.createElement("div",{className:"row"},c.map(e=>r.createElement("div",{className:"col-full lg:col-4 mt-10"},r.createElement(i.A,{post:e})))))))};function u(e){return r.createElement(p,e,r.createElement(c,e))}p.defaultProps={data:null}},8453:function(e,t,n){n.d(t,{RP:function(){return a},xA:function(){return i}});

1var l=n(6540);const r=l.createContext({});function a(e){const t=l.useContext(r);return l.useMemo(()=>"function"==typeof e?e(t):{...t,...e},[t,e])}const c={};function i({components:e,children:t,disableParentContext:n}){let i;return i=n?"function"==typeof e?e({}):e||c:a(e),l.createElement(r.Provider,{value:i},t)}}}]);
2//# sourceMappingURL=component---src-templates-blog-post-jsx-content-file-path-src-content-blog-how-to-set-up-webpack-to-minify-js-with-terser-md-463f2aa55ed6fcb687c1.js.map