vue 打包减小体积

首先查看引用资源例如echarts提取到index.html中cdn引入

其次常用vue+vueRouter+axios+vuex+elementUI

避免打包

然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代码

1. externals: {

2. 'vue': 'Vue',

3. 'vue-router': 'VueRouter',

4. 'element-ui': 'ELEMENT',

5. },

这样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,就行了。