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
echartslibrary 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.DllPluginbecausedllneeds to be introduced on the page using thescripttag, which does not achieve the purpose of loading on demand.
