Questions tagged [bundling-and-minification]
Bundling and minification are used to optimize web content by reducing the number of requests to the server and as well as the size of requested assets (such as CSS and JavaScript).
1,263
questions
1
vote
2
answers
67
views
How to disable bundle minification while building angular app?
I have developed a angular project and have implemented SSR(Server Side Rendering) using angular-universal package.
I am able to successfully serve my project with SSR at port localhost:4000, But I ...
-1
votes
0
answers
52
views
How can I use the google-cloud vision API in my browser-based web app
I am making a website with a p5 canvas that uses your webcam and displays it on the canvas. I am using the ml5 image classifier of MobileNet, and I also want it to display the results from google ...
1
vote
0
answers
30
views
Javascript not loaded properly on first time
In my MVC application ,i made changes in JS file and when load the application for the very first time it is not working as per the new code but it's working as per the old code . So i think this is ...
0
votes
0
answers
9
views
Can the @Scripts.Render command add a version? [duplicate]
To prevent browsers from caching javascript files, I render them like so:
@Scripts.Render("~/Scripts/app/Forecast.js?ver=" + DateTime.Now.Ticks.ToString())
Adding ?ver=9999 to the URL ...
0
votes
2
answers
82
views
How do I determine the version number of a minified JS file?
How do I determine the version number of a minified JS file? I'm using Visual Studio 2022 and the Bundler & Minifier VS Extension. I'm referencing the file in my view by version number, so I'd ...
0
votes
0
answers
28
views
javascript files bundle cashing problem in with .net6
I have a .net6 MVC application and i am using WEBOPTIMIZER to bundle my JS Files
,the application is hosted on IIS where i installed NET Core Hosting Bundle
the problem is when i make any changes to ...
0
votes
2
answers
88
views
Uncaught error for constructor when using Webpack, Babel and Terser for packaging and minification
I am trying to create a websdk using simple JavaScript. When I use Webpack, Babel and Terser for minification and bundling, it is generating bundle.js file but when I use it in my HTML, it's giving me ...
0
votes
1
answer
193
views
How can I safely minify and optimise SVG files?
SVGO is currently the only actively-developed optimiser/minifier for SVG files, which - although being the most common filetype for vector images on the web - are rarely optimised for bandwidth and ...
2
votes
2
answers
216
views
How to remove @license comments from source during npm build (will add manually)?
I am developing a Vite-React webapp to be used by me only, and heres my simple build command in package.json: "build": "vite build --emptyOutDir --base=./".
It uses the Google ...
0
votes
0
answers
82
views
CDN that bundles npm packages for browsers?
TLDR: Does anyone know of a npm package CDN that bundles the Javascript into a non-module js file?
I’m looking to use this package in a userscript. It’s a simple userscript, so I’d rather just use the ...
0
votes
0
answers
15
views
Bundle a param passed function including all external data
I want to create a function bundleFunction() that gets as a parameter a function and bundles it into a string, including all the external dependencies that it uses.
Example usage:
const f1 = 1;
const ...
0
votes
0
answers
48
views
Do minified class names change and if so how often?
I'm trying to create a custom user-defined CSS stylesheet to modify my Reddit experience on Reddit. In doing so I've found that many class names have been hashed to arbitrary strings to prevent ...
0
votes
0
answers
75
views
env-cmd command is not fetching environment variables in Nextjs
I am trying to use env-cmd to load environment variables in next js
"scripts": {
"dev": "env-cmd -f .env.build next dev -p 3006",
"build": "env-cmd -f .env....
0
votes
0
answers
48
views
Parcel v2: how to use env file for dynamically importing dependencies at build time
I'm using Parcel v2 as the bundler for my project, in combination with the plugin for loading SCSS. Given that it is required for me to apply white labeling on the project (different colors and fonts ...
0
votes
1
answer
54
views
How to bundle ckeditor (v4.22.1) related files inside custom Angular (15) library
I am building an angular library using Angular 15. Here I am writing a wrapper component (my_component) to ckeditor (v4.22.1) with ckeditor4-angular (v4.0.1), which will be used in other angular apps. ...
0
votes
2
answers
108
views
How can I figure out what variables are called after minification?
When debugging production code in DevTools I might be so lucky that I get a sourcemap to look at when setting up logpoints/breakpoints. This allows me to inspect variables when I have set a breakpoint ...
1
vote
1
answer
129
views
How can I modify font path with rollup?
I'm currently configuring rollup for my project.
While dealing with assets,(font : .woff) I'm having issue cause, I can't resolve path correctly when bundling my project.
my project dir looks as below....
0
votes
0
answers
74
views
How to know if minification process is successful after deployment?
I am facing issue running npm run build during the minification process as this. Most of the solutions given is to upgrade to react-scripts v2.x.x is not a viable option for me. So I am currently ...
0
votes
0
answers
26
views
How to force update of css files in development with bundling
As I understand it, MVC bundling and minification will automatically update a version parameter when any file in the bundle changes to ensure the browser gets the latest files when they change.
...
0
votes
1
answer
213
views
Embedding external javascript files in html
In a project I'm working on, I want to produce stand-alone .html files.
For convenience and modularity, I want to use separate JavaScript files during the development.
I'm looking for a 'build' ...
3
votes
1
answer
223
views
Main CSS file got corrupted during .less files compilation
In VS project we have 3 files.
fonts.less: This file contains fonts as shown in below example
@font-face{
font-family: "Trade Gothic Next";
src: url("/assets/example.eot");
...
0
votes
0
answers
72
views
Wordpress with ReactJS and bundling with Webpack
I am making a wordpress site using ReactJS and bundling that with WebPack but the main issue is
I'm using react from npm modules like
import react from React
But, In Webpack, It is actually compiling ...
0
votes
0
answers
106
views
hash value not matching for output file with [contenthash] and bundled file inside node build folder in webpack 5 SSR
Application is not able to point to the correct build file from index file because the hash appended file inside node build folder is having different hash.
My webpack config output looks like below
...
2
votes
1
answer
3k
views
How to bundle a commonjs in vite?
I am trying to bundle a dependency (named flickity) that uses require, using vite so that I can use it for some client side javascript. I am aware that client side browser doesn't support node's ...
0
votes
1
answer
1k
views
Running multiple Vite configs in watch mode
I am trying to build chrome extension and use Vite. I am able to build the project, but I don't know how to run it in watch mode.
package.json
{
"private": true,
"version": &...
3
votes
1
answer
707
views
How can I prevent Rollup.js from creating an empty chunk when building scss?
I'm trying to use rollup.js to bundle my SCSS. See my config file below. When it runs, it creates the appropriate css files but it also creates screen.js which is empty and gives me a warning in the ...
1
vote
0
answers
253
views
Allow specific comments on Vite library mode bundle
I'm building a components library with React, Typescript, SASS and Vite in Library Mode.
Everything is working pretty well, but I want to add some comments into bundled files to show some info about ...
1
vote
0
answers
122
views
Is there a way to omit a package or library from being minified or ignored by SWC?
So I am building an audio chatroom in Next.js. For the chatting and calling features, I am using Agora that makes use of the agora-rtm-sdk agora-rtm-sdk and agora-rtc-sdk-ng agora-rtc packages.
So ...
0
votes
0
answers
108
views
Parceljs doesn't completely strip comments
We are using Parceljs v2 for bundling our SPAs.
We've been noticed by our customer's security team that the comments are not completely stripped from the bundles:
We use the default settings for ...
0
votes
1
answer
153
views
Bundles are not generated when running dotnet build in docker
I have an ASP.NET Core 5 application. For js/css bundling, I installed BuildBundlerMinifier nuget package and added bundleconfig.json to the root of the project.
The project runs under Docker with the ...
0
votes
0
answers
93
views
What is the difference between react-native run-android vs react native bundle?
I am working on a React Native app (v0.71.1) and I am wondering if I am running the app in the correct way. I am also wondering what react-native bundle does and why I need it.
My process:
Start ...
1
vote
0
answers
462
views
Using Vite js how to stop scss compilation to css which are inside vue js sfc files (particularly in vite library mode)?
I am building a design system library with using vue3 and vite as builder (in library mode).
Lets take this example vue sfc file below :
// Header.vue
<template>
<div class="header&...
0
votes
0
answers
81
views
How I can do bundling and minification loading the files from cdn links into bundles in ASP .NET Core project targeting .net 6.0?
In ASP.Net MVC following was the way to load files from a cdn link and make it into a bundle:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.UseCdn = true;
var ...
0
votes
0
answers
17
views
Cannot find module '@types/react' from '@types/_fake.js'
I had installed @types/react in a vendor package but when bundling using browserify I see the below error,
Cannot find module '@types/react' from '@types/_fake.js'
0
votes
0
answers
35
views
Depending on Webpack version (4 or 5), exclude some code from bundling
I have a code where WebWorker is created and depending on Webpack version, you have to do it in different way:
For v4.x, utilize worker-loader
For v5.x, just use URL constructor
I'd like my library to ...
0
votes
0
answers
18
views
Is Minification used in Software Development?
Is very common to minify in web development, with html, css, js.
But wonder if is also use, for example, to develop a software in C#.
Can you develop a Photoshop, Final Draft, Adobe Acrobat... and ...
2
votes
2
answers
376
views
how to bundle a module/component to js and use in another angular project?
I was just trying to build a module/component and serve it as a JS bundle. it builds:
@Component({
selector: 'app-component-overview',
template: '<button><ng-content></ng-content>...
0
votes
0
answers
22
views
Can WebOptimizer remove console... statements
New to WebOptimzier and curious if it can remove calls to console.log, console.warn, etc. during the minification process. I don't see any reference to it on the site but hoping it is buried in there ...
1
vote
0
answers
22
views
Run babel plugin during bundling time or after bundling
I have a babel plugin that currently runs pre-bundling and then we use react.gradle on Android to create the js bundle. What I am looking to do is run the same babel plugin during the bundling or post ...
1
vote
1
answer
176
views
Chrome extension + webpack - message passing in production mode
I am building a chrome extension in React and webpack. I use chrome messaging API to communicate between the background page and the popup or content script. In the background script, I use browser....
0
votes
1
answer
163
views
Reload Webpack Html Template on Certain Files Change
I'm using revealjs to create responsive presentations. The problem with revealjs is that all the slides code is written in a single HTML file which can be messy to some level (Some presentations' HTML ...
0
votes
0
answers
189
views
How to use RxJS from Chrome Extensions service worker?
I am able to successfully use RxJs 7.8.0 from my Chrome Extension's popup.js and options.js by importing RxJS from their corresponding popup.html and options.html files like this:
<script type=&...
-1
votes
1
answer
530
views
Web optimizer .net core
Upgrading .net 4.8 mvc app to .net 6. I am keeping the static content in the same folders as in the previous web app project and using the web optimizer to minify and bundle.
I am seeing lot of ...
0
votes
0
answers
162
views
Webpack - Source maps intermittently providing typescript locations
I've recently taken over an issue with a full stack application which is SSR React and returning the HTML string to the client via a node lambda handler function, all written in Typescript. This app ...
-1
votes
1
answer
170
views
How can I check the type of a React functional component at run-time? [duplicate]
Say I have apples and bananas:
function Apple() {
return <div>Apple</div>
}
function Banana() {
return <div>Banana</div>
}
I want to put some in a <FruitSalad>:
&...
1
vote
1
answer
49
views
Creating a tree-shaked bundle of Tabulator with Rollup
I would like to decrease the file size of Tabulator by creating bundles that only use the features I need for specific tables. I followed the advice in the docs for Core With Optional Modules, but I ...
1
vote
1
answer
252
views
Why is css-loader bloating my entry point bundle?
I'm working on cleaning up an older React project and trying to cut down on bundle size by implementing code splitting and chunking things out. I've made considerable progress, but my main entry point ...
0
votes
1
answer
302
views
Angular: Source map error; TypeError: ctx.formData is undefined
In an Angular project, I usually don't see an error in the browser console when I load the project. But when I add projects > project-name > architect > build > options > "...
2
votes
0
answers
101
views
TailwindCSS @layer components being dropped when using documentation --minify command
Following the TailwindCSS documentation, i am trying to minify my final stylesheet to optimise it for production. However i am losing custom styles added via @layer components {} when minifying.
I ...
32
votes
3
answers
7k
views
Next.js 13 devDependencies?
I remember in Next.js 12, the dependencies and devDependencies are still following the rules from this answer. But now, when I type pnpm create next-app, all of the dependencies installed (no matter ...