webpack 與 vue 打包體積優化

2022-02-28 17:36:05 字數 1611 閱讀 1645

在使用vue開發時,遇到打包後單個檔案太大,因而需要分包,不然載入時間太久。雖然盡可能減少請求次數,但是單個包太大也不是好事

entry: ,
需要以實際場景考慮。

頁面按需載入,會把不同頁面區分到不同的js檔案中,訪問相應頁面時才載入這些js。

但實際這些檔案的體積相加比不分開更大。

``` js

// 方法1 prev

const component1 = () => import('@/components/**')

// 方法2 require.ensure

comst component2 = r => require.ensure(, () => r(require('@/components/+'**'+.vue')))

```

經過測試 使用路由懶載入的import反而比require.ensuse更好

原始,沒有啟用的結果

使用import方式

總結

路漫漫其修遠兮,吾將繼續前行,苦修

在使用vue開發時,遇到打包後單個檔案太大,因而需要分包,不然載入時間太久。雖然盡可能減少請求次數,但是單個包太大也不是好事

entry: ,
需要以實際場景考慮。

頁面按需載入,會把不同頁面區分到不同的js檔案中,訪問相應頁面時才載入這些js。

但實際這些檔案的體積相加比不分開更大。

``` js

// 方法1 prev

const component1 = () => import('@/components/**')

// 方法2 require.ensure

comst component2 = r => require.ensure(, () => r(require('@/components/+'**'+.vue')))

```

經過測試 使用路由懶載入的import反而比require.ensuse更好

原始,沒有啟用的結果

使用import方式

總結

路漫漫其修遠兮,吾將繼續前行,苦修

webpack打包體積優化

這個外掛程式可以直觀展示打包之後,每個包的大小,分析出是否重複打包了某個模組。專案中我們通過cdn引入了某個庫,但是又不想這個庫被打包到webpack最終模組中,我們可以使用externals externals webpack4中production模式下會自動開啟tree shaking模式,但...

Webpack 打包優化之體積篇

談及如今欣欣向榮的前端圈,不僅有各類框架百花齊放,如vue,react,angular等等,就打包工具而言,發展也是如火如荼,百家爭鳴 從早期的王者browserify,grunt,到後來贏得寶座的gulp,以及獨樹一幟的fis3,以及下一代打包神器rollup 在 browserify,grunt...

Vue工程webpack打包

npm install webpack g npm install webpack cli g webpack v webpack cli v 新建hello.js暴露方法供其他js引用,可防止原生 script script 標籤引入多個js方法重名的問題。暴露乙個方法 exports.sayhi...