壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)
問題
由于這次項目是在初學 Vue 之后的第一個正式項目，沒有考慮到類似 路由懶加載、 按需加載的問題 ，所以呢，也算是沒經(jīng)驗。
到了這些天，項目寫得差不多了，準備放到服務器測試，才發(fā)現(xiàn)這個問題。
優(yōu)化前：
app.js 2.3MB vendor.js 2.4MB vendor.css 612kB app.js.map 9.13MB vendor.js.map 16.21MB //不一一列舉....
優(yōu)化
接下來看看優(yōu)化方法。
優(yōu)化步驟1： 不生成.map文件
在 webpack.prod.cong.js 文件下，修改配置項 sourceMap 設置為 false 或者刪除：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
// sourceMap: true //將sourceMap關閉就不會打包出.map文件
}),
這樣的話，開發(fā)環(huán)境就不會生成 .map 文件。
優(yōu)化步驟2： 按需加載
對于項目中，一些 通用 或者 不是特別差異 的組件可以使用按需加載，在需要的時候加載即可，并且會自動緩存。
這時候需要在 router 文件夾下的 index.js 文件修改路由配置中的 組件引入 方式：
Vue.use(Router)
export default new Router({
routes:[{
path:"/",
component:function(resolve){
require(["./../components/Index"],resolve)
}
}]
})
這樣的話，這個組件就會在你需要加載的時候才會加載。
優(yōu)化步驟3： VueRouter的懶加載
在 vue-router 的模塊引入，將默認的 import .. from .. 引入方式，修改為一步。如下：
const Foo = () => import("/Foo.vue)
```
然后在 `配置路由` 中，和之前一樣使用：
Vue.use(Router)
export default new Router({
routes:[{
path:”/“,
component:Foo
}]
})
優(yōu)化步驟4：將大的第三方包通過<script>標簽引入
一般將類似 `echarts` 這種比較大的第三方依賴包，通過 `<script></script>` 標簽來引入的話，會很大程度縮小打包的大小。
但是需要在 `vue` 配置文件這樣配置：
`webpack.base.config.js` 中添加 `不打包` 的包的名稱，這樣打包的時候才不會把這些包一起打包進去：
module.exports = {
entry:{...},
output:{...},
resolve:{...},
module:{...},
externals:{
"echarts":"echarts" //不打包的包名
}
}
然后在 index.html 中用 <script></script> 標簽引入依賴包的CDN或者其他地址。
優(yōu)化步驟5： 圖片壓縮
這個不用怎么說，有個地址很好用，推薦下：tinypng
優(yōu)化后
通過這幾步驟，優(yōu)化完成的每個文件都會縮小好多倍：
app.js 136.2kB vendor.js 213.2kB vendor.css 612kB //css 這個我還沒辦法 app.js.map 0MB vendor.js.map 0MB
更多關于VUE壓縮的方案大家可以看看下面的相關文章
相關文章
詳解如何在vue+element-ui的項目中封裝dialog組件
這篇文章主要介紹了詳解如何在vue+element-ui的項目中封裝dialog組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
相信開發(fā)中或多或少都會有使用md的時候。那么一個簡易的md編輯器顯得尤為重要，如果想要在自己的項目中添加一個md編輯器，那么不妨來看看這篇文章2021-10-10
這篇文章主要介紹了websocket在vue2中的封裝使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了解決vue頁面注入js修改input值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
keep-alive是Vue中一個非常有用的特性,它可以幫助我們避免重復渲染和減少組件的渲染次數(shù),從而提高應用程序的性能,本文給大家介紹keep-alive組件緩存的相關知識,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue?路由判斷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Pinia狀態(tài)管理解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue使用pdf-lib實現(xiàn)為文件流添加水印并預覽
這篇文章主要為大家詳細介紹了Vue如何使用pdf-lib實現(xiàn)為文件流添加水印并預覽的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03
VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題
這篇文章主要介紹了VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12