Vue project optimization strategy: loading external CDN resources through externals

Insert picture description here
By default, imported third-party dependency packages will be merged into the chunk-vendors.e50d51a8.js file, resulting in a very large file

During project packaging, webpack will first check whether there are third-party dependent packages declared in external. If so, webpack will not package the declared dependent packages, but go directly to the window global object when the dependent packages are used. Go find:
First step:

config.set('externals', {
    
    
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      lodash: '_',
      echarts: 'echarts',
      nprogress: 'NProgress',
      'vue-quill-editor': 'vueQuillEditor'
    })

Insert picture description here

Step 2: In
our code, the style sheets of nprogress and vue-quill-editor are imported.
Insert picture description here
We delete these codes, and then copy the cdn file of the corresponding component to the index.html file in the public directory:

Insert picture description here

	<!-- nprogress的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css"></link>
    <!-- quill富文本编辑器的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css"></link>
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css"></link>
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css"></link>

The third step is to introduce the js file:
Insert picture description here

<script src="https://cdn.staticfile.org/vue/2.6.2/vue.min.js"></script>
<script src="http://cdn.staticfile.org/vue-router/3.4.9/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.2/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.min.js"></script>

This is the data before optimization:
Insert picture description here
the size of the dependent package now:

Vue project optimization strategy: loading external CDN resources through externals

Guess you like