Vue 项目优化，持续更新...

一、减少打包的体积

通过vue-cli 初始化项目后，使用 npm run build 生成的JS文件往往会很大，加载时间过长导致页面长时间白屏，所以我们尽可能的使用一下方法来减少打包体积。

1.1 通过cdn 引入vue.js、vue-router

对于vue.js、vue-router、axios等静态文件来说，不需要我们去改动，就可以从cdn中引入。分两步进行：

第一步：在项目根路径的index.html中引入脚本

<script src="https://unpkg.com/vue/dist/vue.js"></script>

通常，我们刷新页面会看到报错：Unknown custom element: [<router-view>。这似乎在告诉我们找不到模板编译器。为什么呢？请移步，查看 #独立构建vs运行时构建一节

第二步：配置webpack.dev.conf.js和webapck.build.conf.js

// webpack.dev.conf.js
// 在 module.exports = merge(baseWebpackConfig, { ... } 中增加如下两项
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
  },
  resolve: {
    alias: {
      'vue$': '//cdn.bootcss.com/vue/2.3.4/vue.min.js',
      'vue-router$': '//cdn.bootcss.com/vue-router/2.6.0/vue-router.min.js'
    }
  },

由此，我们便可在开发环境中使用正常获取到 Vue 构造函数了，并且已从打包文件中移除。