This library has a peer dependency on @oneblink/apps. Please ensure you have read the usage documentation on Tenants before starting to use this library.
npm install react@17 react-dom@17 @oneblink/apps-react --save
This library utilises React's lazy loading with dynamic imports for certain components. Depending on your choice of build tool, this can result in a large amount of chunked Javascript files once your project is built.
Below are some examples for common build tools on how to manage these chunks:
module.exports = {
//...,
optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
arcgis: {
test: /[\\/]node_modules[\\/]((@arcgis)|(@esri))[\\/]/,
name: 'arcgis',
chunks: 'all',
},
},
},
},
}
While the following example will significantly reduce the amount of chunks generated, the resulting chunk will be requested on load of your application.
export default defineConfig(() => ({
build: {
//...,
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('@arcgis') || id.includes('@esri')) {
return 'arcgis'
}
},
},
},
},
}))
If you'd prefer to keep the lazy-loading behaviour, you can omit the above. You may also need to adjust your precaching strategies depending on your service worker configuration, in order to prevent a large number of chunks being requested on load of your application.
Below is an example on how you can seperate these chunks in the build output:
export default defineConfig(() => ({
build: {
//...,
rollupOptions: {
output: {
chunkFileNames(chunkInfo) {
const isArcgis = chunkInfo.moduleIds.find(
(id) => id.includes('@arcgis') || id.includes('@esri'),
)
if (isArcgis) {
return `static/arcgis/[name].[hash].js`
}
return `static/[name].[hash].js`
},
},
},
},
}))
You can then adjust your precaching configuration to omit files contained in the static/arcgis folder.