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')

壓縮文件

把代碼壓縮，進而起到一定的文件體積的縮小