使用vue打包,vendor.js文件太大的解决方式
首先查看引用资源例如echarts提取到index.html中cdn引入其次常用vue+vueRouter+axios+vuex+elementUI避免打包然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码externals: {'vue': 'Vue','vue-router': '...
首先查看引用资源例如echarts提取到index.html中cdn引入
其次常用vue+vueRouter+axios+vuex+elementUI
避免打包
然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
},
这样webpack就不会把vue.js, vue-router, element-ui库打包了。声明一下,我把main.js中对element的引入删掉了,不然我发现打包后的app.css还是会把element的css打包进去,删掉后就没了。
然后你打包就会发现vendor文件小了很多~
为了把路由分模块,然后每次进入一个新页面才加载该页面所需要的资源(也就是异步加载路由),我们可以像下面这样使用(router.js):
然后你打包就会发现,多了很多1.xxxxx.js;2.xxxxx.js等等,而vendor.xxx.js没了,剩下app.js 和manifest.js,而且app.js还很小,我这里是100k多一点。
这里我没有生成map文件,这样打包速度快一些,整个项目文件也小很多(map文件一般都很大);
取消生成map文件,找到config/index.js ,修改productionSourceMap: false,就行了。
更多推荐
所有评论(0)