What is causing the large build size when using Webpack with Vue.js?

After cloning the repository at:

https://github.com/Microsoft/TypeScript-Vue-Starter

I executed npm scripts:

npm install
npm run build

The outcome: the size of build.js file is approximately 1MB.

Can anyone explain why the build.js file is significantly larger than the Vue.js library for such a basic example?

Answer №1

It's important to note that Webpack 2 is listed in the package.json file. To reduce the size of the bundle, you'll need to manually optimize it through the webpack.config.js file and manage environment variables.

Alternatively, consider switching to Webpack 4 and updating your build script to:

"build": "webpack --mode production"

By using Webpack 4, the bundle optimization process will be taken care of with default configurations.

For more information, check out this reference link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS ng-include nested form configuration

My application utilizes nested ng-includes. The outer include is a login screen for one application while the inner ng-include includes two templates. The login screen is designed in two steps where the email is checked first and then the password entered. ...

Error TS2307 - Module 'lodash' not found during build process

Latest Update I must apologize for the confusion in my previous explanation of the issue. The errors I encountered were not during the compilation of the Angular application via Gulp, but rather in the Visual Studio 'Errors List'. Fortunately, I ...

Passing an array of items as a property to a child component in React with Typescript is not possible

In my project, I have multiple classes designed with create-react-app. I am trying to send an array of objects to child components as illustrated below. Items.tsx import * as React from 'react'; import ItemTable from './ItemTable'; imp ...

Trouble displaying background image in Electron Application

When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display: <div background="benjamin-child-17946.jpg" class="login" style="height:100%;"> A 404 error is popping up: ...

Using JQuery to append an additional column to an HTML table at the end, determined by array information

I've been experimenting with how to enhance an html table by adding a new column of data. The process involves clicking a button, extracting the existing data column in the table, storing it in an array, performing calculations on it, and then display ...

What are the best techniques for concentrating on a kendo maskedtextbox?

What is the correct way to set focus on the kendo-maskedtextbox in TypeScript after the view has initialized? The information provided in Telerik's example here is lacking in detail. ...

What could be causing the inability to 'GET' a page on an express app?

As a beginner in web app development, I've been self-teaching Node Express. While I've had success running simple express apps on Cloud9 environments, I'm facing difficulties getting them to work with VS Code. The server starts up fine, but ...

using ng-repeat within a nested loop to iterate through objects nested within other objects

https://i.sstatic.net/eoRHo.png My goal is to replicate the image above using AngularJS ng-repeat. I am facing difficulty with the third column. <div tasty-table bind-resource-callback="showTCS.loadAllTCS" bind-init="showTCS.init" bind- ...

Avoid including package-lock.json file in GitHub contribution history

After the release of npm v5.0.0, utilizing npm packages automatically generates a package-lock.json file when running npm install. In my situation, my package-lock.json document is almost 10,000 lines long. Npm advises that this file should be committed: ...

Encountering an unrecoverable SyntaxError while trying to deploy a website on Netlify

When using commands like npm start, npm run build, and pm2 start server.js, everything runs smoothly without any errors. However, I encounter an issue when trying to deploy my project on Netlify. The Chrome console displays the error: Uncaught SyntaxError: ...

Dispose the inputpicker filter after setting the value

I am currently utilizing the "Jquery inputpicker plugin" for creating dropdown menus. More information about this plugin can be found here. To initialize my dropdown, I use the following code: $('#test').inputpicker({ data:[ {value:"1 ...

Implement a transition effect for when elements change size using the `.resizable().css` method

I attempted to incorporate a deceleration effect when resizing an element back to its original size using the resizable method. The slowdown effect should only trigger during the click event (when the "Click-me" button is pressed), not while manipulating ...

Deliver PDF to web browser through JSON with MVC3

Whenever an image is clicked, I need a PDF to open in the browser. To achieve this, I am using Jquery ajax POST call to communicate with ASP.NET MVC and receive a file in response. The POST method is necessary as it allows me to send significant data from ...

Ways to enable asset sharing among various Angular.js applications on separate servers

Hello everyone, I am fairly new to the world of Angular.js and currently exploring its potential for our upcoming project. I am curious if anyone has experience with creating multiple Angular.js applications that are hosted on different servers (most li ...

Tips for resolving the TypeScript error related to the global object in Node.js

I am currently working on a project following the steps outlined in this guide https://vercel.com/guides/nextjs-prisma-postgres to develop a full stack application. However, I have encountered an error with TypeScript in the code snippet below: import { Pr ...

What is the reason for node executing both of these handlers on the server?

My node app is set up with two handlers, one for requests to the root URL and another for the slug. However, when I visit the root or slug URLs, the app crashes and I receive this error: url is pointing to root url has a slug throw err; // Rethrow non-MySQ ...

Navigating through an array in Pug

I'm currently extracting data from an external API in JSON format and sending it to my view. The main issue I'm facing is that one of the properties within the Object consists of an Array of Objects. Using the Pug Documentation for iteration, I&a ...

"Utilizing Vue.js for Managing Foreign Keys in Database Entries

I am currently utilizing input in Vue.js. The structure of this input is as follows: induk_id:'', nama_barang:'', qtt:'', satuan:'', har ...

The jQuery inArray function fails to detect a match when the first element is the one being compared

I want to create an array and check if a specific value is present anywhere in the array. Depending on the presence of the value, I need the code to execute different actions. var Arr = [false, false, false, false, false]; // Works with this array: // Arr ...

Increment and decrement the like count on fa-heart multiple times

Is there a way to increment the count of a fa-heart value on click and decrement it on the second click? The issue I'm facing is that I have multiple fa-heart elements on the same page, making it challenging to increment or decrement the clicked fa-h ...