CODEWITHSUNDEEP
javascriptwebpackbundlevendor
FlyC
FlyC

Reputation: 1874

Can Webpack helps me separate a large single file into smaller pieces?

use .js files as example:
To reduce the number of requests, I know Webpack can concatenate and compress multiple javascript files into a single file,
but, what if a single source of my javascript file has already tooooo large for a single request? maybe 10MB or larger.
By the way, I don't want to separate it by myself.

Can Webpack helps me separate a large single file into smaller pieces?

for example, if I pass 3 into whatever how it works,
the big.js will separate into small-1.js, small-2.js, small-3.js, something like this

I'm a beginner of Webpack, I just want to know what Webpack can or cannot do.
thanks

Upvotes: 1

Views: 995

Answers (1)

Liam
Liam

Reputation: 29714

To reduce the number of requests, I know Webpack can concatenate and compress multiple javascript files into a single file,

Web pack can combine existing files and minify them. Minification is not compression. It just removes whitespace and shortens variable names. This can make a js file smaller but not significantly.

but, what if a single source of my javascript file has already tooooo large for a single request? maybe 10MB or larger. By the way, I don't want to separate it by myself.

Can Webpack helps me separate a large single file into smaller pieces?

No web pack can't do this. Minification might make a file smaller but not significantly. Web pack also cannot split a large file into small files. It can be built to combine files together in such a way that the assests are smaller (see https://webpack.js.org/guides/code-splitting/) but it has no way to take one large file and to produce lots of smaller files from this one file.

Your only option is to refactor yout large file into a smaller one. 10Mb seems huge! What on earth is this doing? This is the nub of your problem. Why is this so large how can you make it smaller. There is no magic bullet here.

I'm a beginner of Webpack, I just want to know what Webpack can or cannot do.

Tl;Dr No you cannot

Upvotes: 1

Related Questions