Move large third-party frontend modules into a webpack DLL during development and testing
Part of &1540
Webpack provides a means to import pre-compiled modules through a "DLL" plugin.
Utilizing this would allow us to reduce the memory footprint of webpack-dev-server
in our GDK's node process. It would retain our business logic in memory, but keep our seldom-changed node modules on disk.
This could also improve compile times in our CI/CD jobs because this compiled DLL can be cached between pipelines in which no changes are made to package.json
or yarn.lock
.
There are a few challenges with this approach, however:
- We will need to ensure that the appropriate DLL is included in a script tag on each page where it is needed
- Webpack can no longer to certain chunk size optimizations for us so we will need to be diligent about configuring things manually for optimal performance
Due to these limitations, the primary goal for this MR will be to implement this DLL for local development and CI only.
Deliverable:
- Create webpack DLL library using only entries from
node_modules
. - Update primary webpack configuration to consume this DLL and refer to these modules externally when possible based on environment settings (automatically on unless
USE_DLL=0
orNODE_ENV=production
are provided) - Ensure webpack only consumes this DLL when its digest matches a hash of
yarn.lock
,package.json
, andwebpack.dll.config.js
file. If the hash mismatches, produce a warning and compile the normal way. - Configure GitLab to include the appropriate script tag for this DLL in the layout
<head>
Follow-ups:
- Configure nodemon to automatically re-compile the DLL when changes are detected in one of these three files.
- Update CI to use a FIFO method to remove older DLLs in its pipeline cache (master branch only)
Edited by 🤖 GitLab Bot 🤖