删除vue打包大小限制_压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)...
問題
由于這次項(xiàng)目是在初學(xué) Vue 之后的第一個(gè)正式項(xiàng)目，沒有考慮到類似 路由懶加載、 按需加載的問題 ，所以呢，也算是沒經(jīng)驗(yàn)。
到了這些天，項(xiàng)目寫得差不多了，準(zhǔn)備放到服務(wù)器測試，才發(fā)現(xiàn)這個(gè)問題。
優(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 文件下，修改配置項(xiàng) sourceMap 設(shè)置為 false 或者刪除：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
// sourceMap: true //將sourceMap關(guān)閉就不會(huì)打包出.map文件
}),
這樣的話，開發(fā)環(huán)境就不會(huì)生成 .map 文件。
優(yōu)化步驟2： 按需加載
對(duì)于項(xiàng)目中，一些 通用 或者 不是特別差異 的組件可以使用按需加載，在需要的時(shí)候加載即可，并且會(huì)自動(dòng)緩存。
這時(shí)候需要在 router 文件夾下的 index.js 文件修改路由配置中的 組件引入 方式：
Vue.use(Router)
export default new Router({
routes:[{
path:"/",
component:function(resolve){
require(["./../components/Index"],resolve)
}
}]
})
這樣的話，這個(gè)組件就會(huì)在你需要加載的時(shí)候才會(huì)加載。
優(yōu)化步驟3： VueRouter的懶加載
在 vue-router 的模塊引入，將默認(rèn)的 import .. from .. 引入方式，修改為一步。如下：
const Foo = () => import("/Foo.vue)
```
然后在 `配置路由` 中，和之前一樣使用：
Vue.use(Router)
export default new Router({
routes:[{
path:”/“,
component:Foo
}]
})
優(yōu)化步驟4：將大的第三方包通過
一般將類似 `echarts` 這種比較大的第三方依賴包，通過 `` 標(biāo)簽來引入的話，會(huì)很大程度縮小打包的大小。
但是需要在 `vue` 配置文件這樣配置：
`webpack.base.config.js` 中添加 `不打包` 的包的名稱，這樣打包的時(shí)候才不會(huì)把這些包一起打包進(jìn)去：
module.exports = {
entry:{...},
output:{...},
resolve:{...},
module:{...},
externals:{
"echarts":"echarts" //不打包的包名
}
}
然后在 index.html 中用 標(biāo)簽引入依賴包的CDN或者其他地址。
優(yōu)化步驟5： 圖片壓縮
這個(gè)不用怎么說，有個(gè)地址很好用，推薦下：tinypng
優(yōu)化后
通過這幾步驟，優(yōu)化完成的每個(gè)文件都會(huì)縮小好多倍：
app.js 136.2kB
vendor.js 213.2kB
vendor.css 612kB //css 這個(gè)我還沒辦法
app.js.map 0MB
vendor.js.map 0MB
更多關(guān)于VUE壓縮的方案大家可以看看下面的相關(guān)文章
總結(jié)
以上是生活随笔為你收集整理的删除vue打包大小限制_压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jpa 多层嵌套一对多_OpenJPA-
- 下一篇： 轮胎上40*12.5-20是什么意思？