The problem of multiple [routing components] referencing the same third-party library in vue

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:

  1. after entering a route, the echarts library is loaded if the routing component relies on echarts .
  2. if the route does not depend on the library, it is not loaded.
  3. 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.
  4. does not use webpack.DllPlugin because dll needs to be introduced on the page using the script tag, which does not achieve the purpose of loading on demand.

multiple references. When you package, you will not pack more than one copy, only an echarts code will be packaged in bundle. There is only a reference code in the referenced file.
using require.ensure, to dynamically introduce files that echarts, has already introduced when you enter that page will only go 304.

require.ensure([], function () {
    require("echarts");
    // echarts
});

commonchunks

Menu