vue cli構建的專案優化

2021-09-25 18:32:46 字數 1571 閱讀 5993

主要是兩個

1.路由懶載入(這個就是只返回你訪問的資源,其餘的資源不會一下全部載入)

2.cdn加速打包(這個玩意的意思就是智慧型尋找離訪問者最近的伺服器站點返回相應資源的意思)

路由懶載入

既然是路由懶載入肯定就是跟路由相關了

//原本路由是這樣寫的

import vue from 'vue'

import router from 'vue-router'

import login from '@/components/login/login'

import home from '@/components/home/home'

import users from '@/components/users/users'

import power from '@/components/power/power'

import roles from '@/components/roles/roles'

import vue from 'vue'

import router from 'vue-router'

// 懶載入(路由元件的引入才可以使用路由懶載入)

const home =() => import('@/components/home/home')

const login =() => import( '@/components/login/login')

const users =() => import( '@/components/users/users')

const rights =() => import( '@/components/rights/rights')

const roles = () => import('@/components/roles/roles')

然後npm run build 打包即可

cdn加速

首先bootsdn去搜需要的外掛程式,下面是**

穩定、快速、免費的前端開源專案 cdn 加速服務 共收錄了 3442 個前端開源專案

比如我們要vue-router 使用cdn加速

第一步,檢視我們的vue-router的版本,然後bootcdn使用對應的版本

index.html引入

然後npm run build 打包即可
ok 專案的兩個優化教程結束

使用vue cli構建專案。

所以操作皆在命令列下完成 npm install golbal vue clivue init webpack workname workname為專案名 tables areproject name 專案名 不可大寫 project description 專案描述 author 作者vue bu...

怎麼構建vue cli專案

1.安裝node.js 已安裝可直接跳過,建議檢視node版本,node v 2.npm包管理器,是整合在node中的,可跳過 npm v 3.由於npm的有些資源被牆,為了更快更穩定,所以我們需要切換到 的npm映象 cnpm。全域性安裝 npm install g cnpm,檢視版本 cnpm ...

Vue CLI 基於webpack構建優化

參考vue cli 基於webpack構建優化,資源打包與資源預壓縮 yarn add filemanager webpack plugin dev d 宣告外掛程式 const filemanagerplugin require filemanager webpack plugin 外掛程式配置。...