Vue项目优化——使用CDN减小代码体积加快请求速度

1. 为什么使用CDN

使用CDN主要解决两个问题：

1. 打包时间太长、打包后代码体积太大，请求慢
2. 服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题

2. 具体步骤

1. 在/index.html中引入CDN

2. 修改/build/webpack.base.conf.js中修改配置。给module.exports添加externals属性(详见https://webpack.docschina.org/configuration/externals/)，其中键是项目中引用的，值是所引用资源的名字。需要注意的是资源名需要查看所引用的JS源码，查看其中的全局变量是什么，例如element-ui的全局变量就说ELEMENT

    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'ElementUI': 'ELEMENT',
        'axios': 'axios',
      }
    }
   

3. 删除原先的import

   如果不删除原先的import，项目还是会从node_modules中引入资源。
   也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。所以我认为还是删了好。

   删了之后我这边又出现另一个问题，ESlint一直在报xxx is not defined的错误，这个是ESlint的配置问题，只需要在使用资源的上部打上备注就行，如下

    /* global Vue */
    Vue.use(VueRouter)