CODEWITHSUNDEEP
javascriptwebpackgulp
Fered
Fered

Reputation: 908

Is packing JS lib/plugins and maybe CSS files into a single file a right thing?

I know nowadays developers want to reduce the number of requests a webpage sends that includes JavaScript and CSS files and there are some task runners and packers like Webpack and gulp that help you to pack all the scripts and styles either from your own work and/or a plugin/lib into one script file, but the question is, is this a right thing to do?

for example a project that uses react , redux, react-redux can have a single script file that includes all these lib plus the project scripts , perhaps uglified/minified for like +1MB.

as many websites or web apps currently use such lib, isn't it better that those lib are added from some CDNs which helps users to not re-download them if their browser already cached ?

Hope my question is clear enough :) cheers

Upvotes: 0

Views: 48

Answers (1)

PlayMa256
PlayMa256

Reputation: 6831

No, it is not. The better solution is code-splitting. Where you have multiple small files, which are going to be loaded only when required. This can be accomplished using webpack too. The "best" solution is to have, for example, react+redux in a single file and this be downloaded straight away. If other dependencies are not required for the whole application, they should be lazy-loaded.

A perfect scenario:

Given you have a vendor.js containing react + redux (used in the whole application).

A single page which for example, you import moment.js.

User enters website --> downloads react+redux bundle (cached now) -> goes to the other page -> downloads moment.js file.

Something around these lines.

Useful resouce: https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31 (using webpack 3, but easily translatable to webpack 4). Also look for splitChunks on webpack docs (https://webpack.js.org)

Upvotes: 1

Related Questions