vue项目打包优化之CDN和路由懒加载

路由懒加载

一.前言
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
让组件按需加载

1.修改 router/index.js 中导入组件的语法

webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。

2 **修改 /build/webpack.prod.conf.js 中的chunkFilename

CDN优化第三包的加载

在Vue项目中，引入到第三方包的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。

解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

外部的库文件，可以使用CDN资源，或者别的服务器资源等。

下面，以引入vue、vuex、vue-router为例，说明处理流程。

一. 在 index.html 中引入CDN提供的JS文件
提供个快速查找cdn网址： https://www.bootcdn.cn/

2. 在 /build/webpack.base.conf.js 中添加配置 externals对象(vue-cli2中)

vue表示 import Vue form vue
Vue表示的全局变量中的Vue
import vue from Vue不会在去node_modules中加载vue

 externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT',
    moment: 'moment',
    'vue-quill-editor': 'VueQuillEditor'
  },

**

3.在vuel-cli3中需要这样配置

**

注意：像vue-router这种峰值写法，key值需要加双引号

3.在main.js中就可以注释掉引入的css
注意**：通过CDN引入 element-ui 的样式文件后，就不需要在 main.js 中导入 element-ui 的CSS文件了。所以，直接注释掉 main.js 中的导入 element-ui 样式即可，（但是全局的vue，axios这些在组件会被使用，不能被注释）

4.这时你会发现打包后vendor.js的比之前cdn没优化之前小了很多