webpack与vue有关配置
1 打包分析插件-webpack-bundle-analyzer
安装
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
2 cdn引入部分第三方包
根据BundleAnalyzerPlugin插件分析,我们可以选择一些npm包进行cdn引入来减小打包体积从而提升加载速度
webpack配置
在对应的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引入CDN
在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"