npm run build 在项目打包的时候,所有的import导入的文件都会打包到js/chunk-vendors.31223dbd.js中 使用Vue ui 就会看到旁边存在! 就表示这个文件的体积大了。观察右边的依赖项就可以看到是哪些文件大了。
打开vue.config.js 凡是set里面都不会在打包的时候加载到js/chunk-vendors.31223dbd.js中 而是去全局中找
chainWebpack: config => {
config.set('externals', {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex'
})
}
在全局index.html 引入对应的cdn上的资源 至于链接地址则需要去对应的官网去找了。
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.4.3/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script>
再次打包 (我个人从3.8M->2.7M) 可以看到js/chunk-vendors.31223dbd.js 小了不少