Vue项目优化策略之通过externals加载外部CDN资源

在这里插入图片描述
默认情况下，导入的第三方依赖包，都会合并到chunk-vendors.e50d51a8.js文件中，导致这个文件体积非常大

在项目打包期间，webpack会先检查external里面有没有申明第三方的依赖包，如果有的话webpack就不会把申明过的依赖包打包进去，而是用到依赖包的时候直接去window全局对象去找：
第一步：

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

在这里插入图片描述

第二步：
我们代码中，导入了nprogress和vue-quill-editor的样式表
在这里插入图片描述
我们把这些代码删除，然后把对应组件的cdn文件复制到public目录下的index.html文件里：

在这里插入图片描述

	<!-- 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>

第三步，引入js文件：
在这里插入图片描述

<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>

这是优化之前的数据：
在这里插入图片描述
现在的依赖包的大小：

Vue项目优化策略之通过externals加载外部CDN资源

猜你喜欢