The PWA approach allows the application to be loaded as it's used and webpack allows implementing it. Webpack allows you to manage multiple page setups. Twitter and Tinder case studies illustrate how the PWA approach can improve platforms.
Using Service Workers improves offline experience and especially Workbox and its associated workbox-webpack-plugin can be useful for setting up the approach with minimal effort. Conversely, you can load initial content faster. The total size of the application is larger in this case. Page shells are more granular, and more are loaded as the application is used.
webpack-pwa example illustrates how to implement the approach using webpack either through an app shell or a page shell.Īpp shell is loaded initially, and it manages the whole application, including its routing.
If you push the idea further by combining it with code splitting and smart routing, you'll end up with the idea of Progressive Web Applications (PWA). The development target requires vServer() helper and a more complex merge operation based on the target type. To support development mode, see the Composing Configuration chapter on how to set it up. The parameter allows capturing chunks generated by Bundle Splitting and doing this would allow you to load a shared vendor bundle for all pages. While experimenting, match the name given at parts.entry. If you set it to chunks: for one of the pages, you should see nothing on the page for example.
To control which entries are used on each page, use the chunks parameter of parts.page. You should be able to navigate to both pages any other should not be available. To see it in the browser, run npx serve dist to display the result. page = ( Testing the build #Īfter these steps, you have a minimal build with two pages: / and /another. MiniHtmlWebpackPlugin, } = require ( "mini-html-webpack-plugin" ) Įxports. The idea can be modeled as a configuration part as below:
For the demonstration, using the former is enough.Ī page should receive title, url, and chunks for deciding which scripts to include to the page. html-webpack-plugin would work well for the purpose as well and using it would give you access to the plugins written for it. To generate multiple pages with webpack, we can leverage mini-html-webpack-plugin. Here we'll set up single configuration based on which to experiment further. These ideas grow on top of the basic approaches. For example, you have to generate i18n variants for pages.