vue-cli
generated projects use lazy loading of routes;
projects have more routes, but some routes do not jump to each other. Users may only operate under a certain route,
how do I extract a third-party library when multiple routing components introduce the same third-party library (such as echarts
, etc.)?
the current situation is that vue-cli will package echarts
or other libraries (there is an echarts in every echarts-dependent routing component)
as shown in the figure below, routing 1 and route 2 have introduced echarts, and the two routing components have each packaged a copy of echart, routing 3 that has not been introduced.
implementation effect:
- after entering a route, the
echarts
library is loaded if the routing component relies onecharts
. - if the route does not depend on the library, it is not loaded.
- while multiple routing components rely on this library at the same time (jumping between routes that depend on the same library), it only needs to be loaded once.
- does not use
webpack.DllPlugin
becausedll
needs to be introduced on the page using thescript
tag, which does not achieve the purpose of loading on demand.