如何在Vue项目中优化打包体积?其实要解决这个问题也不难,为此小编总结了这篇文章,下面我们一起来看看优化使用webpack打包体积的方法。
在webpack.base.conf.js文件中添加打包排除项:
externals: {
'vue': 'Vue',
'echarts': 'echarts',
'axios': 'axios',
'vuex': 'Vuex'
},
然后去掉main.js中的导入,在index.html添加BootCDN的链接:
<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
在config/index.js中设置:
cssSourceMap: false,
productionSourceMap: false,
productionGzip: true,
component: (resolve) => require(['../components/Index.vue'], resolve)
看完这篇文章,你们学会在Vue项目中优化打包体积的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。