npm i webpack-bundle-analyzer -D
在对应的webpack配置文件(webpack.prod.conf.js)中添加此插件
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
npm run build
根据BundleAnalyzerPlugin插件分析，我们可以选择一些npm包进行cdn引入来减小打包体积从而提升加载速度
在对应的webpack配置文件(webpack.base.conf.js)的module.exports 中的externals添加要忽略的包
例如：
module.exports = {
externals: {
'BMap': 'BMap',
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'vant': 'vant',
'mockjs': 'mockjs',
'vue-awesome-swiper':'VueAwesomeSwiper'
},
}
//key值为npm包名,value值为cdn的js文件中export的名称（需要阅读js文件获得**这个一定要注意）
//有时候会报错，是因为cdn引入的包有依赖关系，比如vue-router必须依赖vue，所以要先加载vue才可以
在index.html文件的head中引入有关js文件,不影响进度的js或css文件可以放入body中，不阻塞html展示
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.4/vue-router.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.48/vant.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.7/vconsole.min.js"