Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack workflow splitting vendor and app code efficiently

I have had trouble finding sufficient Webpack documentation and examples to hash out an ideal dev workflow for my situation. Here are all the features that would make the workflow ideal:

  1. Watching, ideally through Gulp, with efficient caching. (Don't think I need hot module replacement and suspect it might not fit into my dev environment well.)

  2. Vendor modules (right now I have only npm packages, not all of them exposing UMD globals in their main file, if it came down to that) that are

    a. not parsed & re-compiled during watch (so recompilation is faster),

    b. do not receive a sourcemap (so browser devtools are faster to respond), and

    c. write to a distinct vendor.js bundle that browsers can cache separately from app bundles.

  3. App modules that are

    a. explicit about all dependencies (i.e. import React from 'react'; even if React is actually globally exposed or something via #2),

    b. are re-compiled during watch, and

    c. do receive a sourcemap.

Most of what I have read in documentation or examples has not seemed to hit this workflow on the head.

While I do see in the docs how to create a vendor-specific bundle (reproduced here: Simple solution to share modules loaded via NPM across multiple Browserify or Webpack bundles), the simple example provided does not address 2a and 2b.

I don't see in the docs any ways to specify different compile-configurations (sourcemaps, etc.) for different chunks, or to create completely separate Webpack bundles with separate config files that can reference each other, unless by globalizing all vendor libraries and using them as externals (?), which isn't ideal ...

Also, I am curious whether Gulp users are using gulp-webpack or instead a setup like that provided in http://webpack.github.io/docs/usage-with-gulp.html. (I'm not sure how well the webpack-dev-server would fit into my dev environment so would like to stick to gulp-watch if possible.)

Am I missing something that other Webpack users know about? What's the best way to do this?

OR is it possible that Webpack is not the right tool for the job?

like image 985
davidtheclark Avatar asked Dec 21 '14 18:12

davidtheclark


People also ask

Does code splitting improve performance?

Code-splitting is splitting the bundle file into chunks based on the user's needs or what the user is interested in seeing. This idea brings about a decrease in the website's load time since users will need to download a smaller bundle file, giving users a better experience.

Does webpack do code splitting?

Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.

How does webpack improve performance?

Code Splitting Code splitting is a feature provided by webpack to split your code into multiple bundles which can be used on-demand. Code splitting results in reduced bundle size which can help us in improving the load time, hence, improving the performance.

What is code splitting in Webpack?

This guide extends the example provided in Getting Started. Please make sure you are at least familiar with the example provided there and the Output Management chapter. Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.

Can I use code-splitting in Webpack for Vanilla JS apps?

In fact, vanilla JS apps can make use of code-splitting, and even apps that are mostly server-rendered but have interactive widgets embedded here and there can make use of the technique. If you want to dive deeper into some granular code-splitting that webpack lets you do, look into the optimization.splitChunks plugin that comes with webpack 4.

What is Webpack import () used for?

This allows it to be handled asynchronously, requested at runtime from a user’s browser. When import () is used Webpack creates a new chunk for the imported code, splitting it from the main bundle.

What is the use of Webpack in react?

The React docs and Webpack docs have examples of this in its base form: This allows it to be handled asynchronously, requested at runtime from a user’s browser. When import () is used Webpack creates a new chunk for the imported code, splitting it from the main bundle.


1 Answers

Watching, ideally through Gulp, with efficient caching. (Don't think I need hot module replacement and suspect it might not fit into my dev environment well.)

Use webpack-dev-server.

You don't really need Gulp for this but you can use its Node API with Gulp (I'm doing that).

Vendor modules (right now I have only npm packages, not all of them exposing UMD globals in their main file, if it came down to that) that are

a. not parsed & re-compiled during watch (so recompilation is faster),

I don't think unchanged files would be parsed or recompiled during watch.

b. do not receive a sourcemap (so browser devtools are faster to respond), and

Don't know how to do this one. I think source maps are either all in or all out. But you can use devtool: 'eval' which works much faster than source maps.

c. write to a distinct vendor.js bundle that browsers can cache separately from app bundles.

I think you're looking for split-by-name-webpack-plugin.

App modules that are

a. explicit about all dependencies (i.e. import React from 'react'; even if React is actually globally exposed or something via #2),

This will work. To require globally exposed libraries, use externals config option.

b. are re-compiled during watch, and

What has changed, will be recompiled (if you use webpack-dev-server).

This doesn't answer all your questions but I hope it's enough to figure out whether this works for you. I don't think “not watching libraries” is such a big issue as you say it is (there's very little perf penalty on rebuilding cached modules) and if you ditch sourcemaps and use devtool: 'eval', I'd say it's really fast. Finally, there's a new watching solution in the works for Webpack so you might want to give it a spin. It should have even better perf.

like image 141
Dan Abramov Avatar answered Nov 08 '22 17:11

Dan Abramov