目錄 技術分享 自己實現 設置 www 技術 報錯 鏈接 兩種

我優化公司的項目總結的幾點：

1、先查看引入的圖片大小，如果太大了，可以壓縮，壓縮路徑：https://zhitu.isux.us/

2、代碼包優化，

待下項目開發完成。進行打包源碼上線環節，需要對項目開發環節的開發提示信息以及錯誤信息進行屏蔽，一方面可以減少上線代碼包的大小；另一方面提高系統的安全性。在vuejs項目的config目錄下有三個文件dev.env.js(開發環境配置文件)、prod.env.js(上線配置文件)、index.js(通用配置文件)。vue-cli腳手架在上線配置文件會自動設置允許sourceMap打包，所以在上線前可以屏蔽sourceMap。如下所示，index.js的配置如下,通用配置文件分別對開發環境和上線環境做了打包配置分類，在build對象中的配置信息中，productionSourceMap修改成false:

3、路由懶加載：

官方上提示有兩種，

一種是：這種因為沒有聲明打包的文件名稱，所有的路由就會打包到同一個js文件中

const Foo = () => import(‘./Foo.vue‘)

另一種是：是把組件按塊封裝，/* webpackChunkName: "group-foo" */，就是聲明的組件塊，如果有多個的名稱，就會 打包多個js文件

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

我自己實現：

const ColMoney = () => import(/* webpackChunkName: "Proscenium" 
 
*/ ‘@/components/pages/Proscenium/ColMoney/MoneyList‘)

const Prepay = () => import(/* webpackChunkName: "LearnTube" */ ‘@/components/pages/LearnTube/Student/Prepay‘)

只寫了兩個例子，這樣就會生成兩個js文件，等去點擊那個路由時，才會加載相應的js文件。

以上是我親自試過的，

我在網上看過很多的博文，說：

1、引入cdn加速，也就是vender bundle ，我目前還沒有試過，https://segmentfault.com/a/1190000009443366?utm_source=tag-newest 大家可以去這個上面看看，我覺得可行。

2、對項目代碼中的JS/CSS/SVG(*.ico)文件進行gzip壓縮，我試過，但是沒成功，npm install --save-dev compression-webpack-plugin一直報錯，我就放棄了，大家如果想看，可以去 https://www.jianshu.com/p/41075f1f5297 這個鏈接看看。

淺談Vue 項目性能優化 經驗