sula
sula copied to clipboard
umijs
Feature: Dynamic Imports, CDN / External scripts import in browser
Description
Currently the antd, react, eCharts etc. are hard-linked into the package, making the produced bundle size large. Please consider
- enabling
dynamic imports - allowing external libraries to be loaded from CDN also
This will reduce the bundle size, and webpack compile times will be small.
Solution
UMI documentation allows to use external scripts such as:
scripts: process.env.NODE_ENV === 'development' ? [
'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js',
'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js',
] : [
'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js',
'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.production.min.js',
],
But in the code, in many places, the packages are hard coded as:
import React from 'react';
import { Form as AForm } from 'antd';
It would be great if the code loads such third party packages
- dynamically, load on demand (Ref: https://umijs.org/docs/load-on-demand#load-component-on-demand )
- check if the package is already loaded externally first. If not do the import.
- For example, do the import only if
window.Reactis not already available. If already available, use it, instead of importing
- For example, do the import only if
I think this is what you need https://github.com/iShawnWang/kilobyte/issues/14 ~
which is typescript version of https://usehooks.com/useScript/
Thank you @iShawnWang . I think that useScripts hook is referring to being able to load any script truly at runtime dynamically. Which is very powerful.
I was referring to much simpler option of being able to load the antd, eCharts, react etc. from the <head> section of the page, so that webpack does not need to bundle them. This improves the performance, due to reduced bundle size as well as loading from CDN heavily uses the network caches, browser caches etc.
The dynamic loading part I was referring to was chunking by the webpack such that components are loaded on demand rather than in a single big module.
Ofcourse, if the useScript hook can be used then it may solve all these problems too, but looks like it is slightly complex to implement. I could be wrong. If it is not complex, then it is also a good solution to consider.