vue项目的打包优化

cdn节点

在开发阶段，为了方便前后台的操作，我们在开发阶段所需要的包呢，是直接引入在打包文件里的，这样不会有网络加载问题，但是项目完成时，需要打包上线，就需要考虑到网络的加载问题
这里我们提到的是cdn节点，在打包完成时，我们会看到依赖和请求时间都是非常大的，如果网络稍稍差一点就需要等很长时间，所以我们就可以考虑到把所需的包换成，页面直接引入cdn节点的形式，来减少依赖。
首先在index.html引入这些包
然后在 webpack.base.conf.js 里面的 webpackConfig里面写入下面代码，避免冲突
cdn 后引入还是正常的 import引入

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

路由懒加载

在vue项目中我们如果使用同步加载的方式，在首次加载会对网络资源占用很大，加载会比较慢，所以设置路由懒加载，按照需要加载会加速首次加载的渲染。
这里需要一个插件
vue-router官方有推荐syntax-dynamic-import插件，不过我们需要先安装babel插件@bable/core^7.0.0
命令如下：
npm install babel-plugin-syntax-dynamic-import --save-dev
安装好之后，我们需要修改一下配置文件
在babel配置文件中加入插件

module . exports = {
  presets: [
   ' @vue/cli-plugin- babel/preset'
 ],
 plugins: [
 prodPlugins,
' @babel/plugin- syntax - dynamic- import"|
}

配置完成之后就可以修改路由啦

// router.js
const router = new VueRouter({
  routes: [
    { path: '/login', component: login }
  ]
})

修改如下

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

压缩文件

把代码压缩，进而起到一定的文件体积的缩小