解决 vue2 + vant2 打包文件（vendor.js、app.css）过大问题

解决 vue2 + vant2 打包文件（vendor.js、app.css等）过大问题

1.vant引入问题

首先注意vant引入时，是否为 自动按需引入组件 (推荐)。此模式与导入所有组件冲突

如果切换模式，可按文档删除配置

---

2. webpack.base.conf.js 中配置忽略打包

externals:{
    
    
  'vue': 'Vue',
  'vant': 'vant' // 个人测试时vant为小写，可参考
},

---

3. index.html 中引入cdn

<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<!-- Vant -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

之后就可以 npm run build 查看打包后的文件大小了。

备注：
1.由于打包时，忽略了引入的vue，vant等js和css样式文件，所以启动时需要用引入cdn方式重新引入。
2.本地项目中按需引入、全局引入方式均可以正常运行。只是打包时忽略这些文件