首先查看引用资源例如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,就行了。