1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样：
<head>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.2.2/vue.common.js"></script>
</head>
<body>
<script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
</body>
然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代码
externals: {
'vue':'Vue',
'echarts':'echarts',
'element-ui':'ELEMENT',
},
2、vue路由的懒加载
刚开始我们使用路由可能是下面这样（router.js），这样一开始进入页面就会把所有的路由资源都加载，如果项目大，加载的内容就会很多，等待的时间页就会越长，导致给用户的不好的体验效果。
import Home from './views/Home.vue'
import Login from './views/Login.vue'
const routers = [
{ path: '/', meta: { title: '首页' }, component: Home },
{ path: '/login', meta: { title: '登录' }, component: Login },
]
export default routers;
为了把路由分模块，然后每次进入一个新页面才加载该页面所需要的资源（也就是异步加载路由），我们可以像下面这样使用(router.js)：
const routers = [
{ path: '/', meta: { title: '首页' }, component: resolve => require([ './views/Home.vue' ], resolve) },
{ path: '/login', meta: { title: '登录' }, component: resolve => require([ './views/Login.vue' ], resolve) },
]
export default routers;
或者
//正常的实现路由方式：(打包的后会在app.js中)
import Home from './views/Home.vue'
//AMD风格的异步加载：(打包后不在app.js内，会生成单独的js文件)
const Home = resolve => require(['./views/Home.vue'],resolve)
const routes = [
{ path: '/', name: "首页", component: Home },
]
然后你打包就会发现，多了很多1.xxxxx.js；2.xxxxx.js等等，而vendor.xxx.js没了，剩下app.js 和manifest.js，而且app.js还很小，我这里是100k多一点。
这里我没有生成map文件，这样打包速度快一些，整个项目文件也小很多（map文件一般都很大）;
取消生成map文件，找到config/index.js ，修改下面productionSourceMap为false，就行了。
module.exports = {
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '../',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
.......
}
},
