問題

由于這次項目是在初學 Vue 之后的第一個正式項目，沒有考慮到類似 路由懶加載、 按需加載的問題 ，所以呢，也算是沒經驗。

到了這些天，項目寫得差不多了，準備放到服務器測試，才發現這個問題。

優化前：

app.js 2.3MB

vendor.js 2.4MB

vendor.css 612kB

app.js.map 9.13MB

vendor.js.map 16.21MB

//不一一列舉....

優化

接下來看看優化方法。

優化步驟1： 不生成.map文件

在 webpack.prod.cong.js 文件下，修改配置項 sourceMap 設置為 false 或者刪除：

new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false

},

// sourceMap: true //將sourceMap關閉就不會打包出.map文件

}),

這樣的話，開發環境就不會生成 .map 文件。

優化步驟2： 按需加載

對于項目中，一些 通用 或者 不是特別差異 的組件可以使用按需加載，在需要的時候加載即可，并且會自動緩存。

這時候需要在 router 文件夾下的 index.js 文件修改路由配置中的 組件引入 方式：

Vue.use(Router)

export default new Router({

routes:[{

path:"/",

component:function(resolve){

require(["./../components/Index"],resolve)

}

}]

})

這樣的話，這個組件就會在你需要加載的時候才會加載。

優化步驟3： VueRouter的懶加載

在 vue-router 的模塊引入，將默認的 import .. from .. 引入方式，修改為一步。如下：

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

```

然后在 `配置路由` 中，和之前一樣使用：

Vue.use(Router)

export default new Router({

routes:[{

path:”/“,

component:Foo

}]

})

優化步驟4：將大的第三方包通過

一般將類似 `echarts` 這種比較大的第三方依賴包，通過 `` 標簽來引入的話，會很大程度縮小打包的大小。

但是需要在 `vue` 配置文件這樣配置：

`webpack.base.config.js` 中添加 `不打包` 的包的名稱，這樣打包的時候才不會把這些包一起打包進去：

module.exports = {

entry:{...},

output:{...},

resolve:{...},

module:{...},

externals:{

"echarts":"echarts" //不打包的包名

}

}

然后在 index.html 中用 標簽引入依賴包的CDN或者其他地址。

優化步驟5： 圖片壓縮

這個不用怎么說，有個地址很好用，推薦下：tinypng

優化后

通過這幾步驟，優化完成的每個文件都會縮小好多倍：

app.js 136.2kB

vendor.js 213.2kB

vendor.css 612kB //css 這個我還沒辦法

app.js.map 0MB

vendor.js.map 0MB

更多關于VUE壓縮的方案大家可以看看下面的相關文章

總結

以上是生活随笔為你收集整理的删除vue打包大小限制_压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。