默认情况下, 导入的第三方依赖包,都会合并到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/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
这是优化之前的数据:
现在的依赖包的大小: