vue極致打包 Vue之不完美的極致優化

2021-10-13 03:33:06 字數 798 閱讀 6943

第三方按需載入,比如:element按需載入,用了哪些元件就之引入哪些元件。

// main.js

import from 'element-ui';

vue.component(button.name, button);

vue.component(select.name, select);

// 或寫為

vue.use(button)

vue.use(select)

cdn引入: 可以把一些檔案或者第三方庫採用cdn的方式引入。比如:vue、vuex、vuerouter等。

在index.html 檔案中通過script 標籤引入cdn,最後再webpack中配置一下,打包的時候不要把通過cdn引入的檔案或者第三方庫打包進去。

// webpack配置

externals: ,,,

非同步元件

new vue({

components: {

'my-component': () => import('./my-async-component')

盡量少的並且合理的使用watch、computed。比如:你只是想監聽物件裡面乙個key的變化,就沒必要監聽整個物件。因為這會增加依賴的數量,增加開銷。

object.freeze() 凍結只是用來展示的資料,vue就不會把資料轉換成響應式的,從而減少依賴的數量,提公升效能。

當頁面過於複雜時,可以把模組拆分成元件,模組需要的功能,在元件內部來實現,可以完美配合非同步元件使用。

把元件的css解除安裝乙個單獨的檔案內,再在元件內引入。元件內的 css 會以

vue之打包優化

最近寫專案,4個平台的專案由乙個 庫管理,超過50個.vue檔案,導致 量過大,每次構建打包速度都很慢,下面是針對vue打包構建優化的一些測試結果 第一次npm run dev 第一次npm run build構建 優化修改如下 1,採用cdn載入ui庫,把不常改變的庫放到index.html中,通...

vue專案打包之減小包的體積

預設情況下,凡是通過 import 方式引入的包,打包時都會被打包,這就會導致最後的包體積比較大,伴隨而來的就是程式的載入速度慢 解決方法主要是兩個 乙個是使用cdn 乙個是路由的懶載入 先說 cdn 核心思想就是將線上環境中用到一些依賴,比如 vue vuerouter axios 等,使用 cd...

vue 之webpack打包工具的使用

一 什麼是webpack?webpack是乙個模組打包工具。用vue專案來舉例 瀏覽器它是只認識js,不認識vue的。而我們寫的 字尾大多是.vue的,在每個.vue檔案中都可能html js css甚至是資源 並且由於元件化,這些.vue檔案之間還有錯綜複雜的關係。所以專案要被瀏覽器識別,我們就要...