注意vue的配置文件webpack.base.conf.js ===vue-cli里是根目录的vue.config.js的configureWebpack节点
不同版本vue请根据实际情况修改
首先查看引用资源例如echarts提取到index.html中cdn引入

一、简单方法

常用vue+vueRouter+axios+vuex+elementUI
避免打包
然后找到build/webpack.base.conf.js或者vue.config.js文件，

#vue-cli  根目录的vue.config.js
module.exports = {
configureWebpack:()=>{
      return {
          externals: {
              'vue': 'Vue',
              'vue-router': 'VueRouter',
              'element-ui': 'ELEMENT',
           }
      }
} } 

或

#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打包进去，删掉后就没了。

最后index.html引入css+js

可去官网下载最新版

  <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="https://unpkg.com/vant/lib/vant.min.js"></script>

1.在index.html的文件头部引入element-ui的组件库。

引入vue

<!-- 开发版，开发过程中使用此方案-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产版，打包的时候使用此方案 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

引入element-ui

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>

2.在main.js中进行修改如下所示

// import Vue from 'vue'            //需要注释掉全局本地引入的vue
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.use(ELEMENT);               //在外部引入的element-ui的为ELEMENT，如此写即可

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.在build\webpack.base.conf.js中进行修改，在module.exports中添加如下内容：

externals:{
  "element-ui":"ELEMENT",
  "vue":"Vue"
},
// 思为不进行打包的文件，如不设置，外部引入的内容将会被打包

然后你打包就会发现vendor文件小了很多~

二、详版方法

---

为了把路由分模块，然后每次进入一个新页面才加载该页面所需要的资源（也就是异步加载路由），我们可以像下面这样使用(router.js)：

一、路由懒加载

const Home = () => import('./views/Home.vue');
const MyInfo = () => import('./views/MyInfo.vue');

在.babelrc中

"plugins": ["@babel/plugin-syntax-dynamic-import"]

二、分离公共代码

webpack 4.x
optimization与output同级

 optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      chunks: 'async',
      minChunks: 2,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          // chunks 有三个可选值，”initial”, “async” 和 “all”. 分别对应优化时只选择初始的chunks，所需要的chunks 还是所有chunk
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /[\\/]node_modules[\\/]/
        }
      }
    }
  },

三、css懒加载

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

该插件需要webpack 4.x

//sass
      {
        test: /\.(sc|sa|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ]
      },

plugins中：

new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
      chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
    }),

四、CDN引入

  <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="https://unpkg.com/vant/lib/vant.min.js"></script>

webpack.base.conf.js中

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'vant': 'vant'
  },

externals与output同级。

删掉项目中import的这几个相关的，以及Vue.use()。eslint插件报错not defined的话，前面加个window，如window.VueRouter。

五、js压缩、css压缩
这个就不说了。

推荐使用webpack 4.x，在production模式下有Tree Shaking和Scope Hoisting。
如果还是过大，可以使用下面插件：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
      new BundleAnalyzerPlugin()
  ]

它会生成一个分析图，你的文件里包含了哪些文件，打包后，它会自动在浏览器中打开。