快捷導(dǎo)航

壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)

更新時(shí)間：2020年02月03日 08:14:33 作者：pingan8787

大家都知道，Vuejs的 CLI工具是基于 webpack 來實(shí)現(xiàn)的，所以在項(xiàng)目打包后，會生成的文件會很大。主要原因是 webpack 將我們所有文件都打包成一個(gè)js文件，即使再小的項(xiàng)目，打包之后文件都會變得很大。下面講講最近我遇到的相同問題。

問題

由于這次項(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)閉就不會打包出.map文件
}),

這樣的話，開發(fā)環(huán)境就不會生成 .map 文件。

優(yōu)化步驟2：按需加載

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

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

Vue.use(Router)
export default new Router({
  routes:[{
    path:"/",
    component:function(resolve){
      require(["./../components/Index"],resolve)
    }
  }]
})

這樣的話，這個(gè)組件就會在你需要加載的時(shí)候才會加載。

優(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：將大的第三方包通過<script>標(biāo)簽引入

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

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

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

module.exports = {
  entry:{...},
  output:{...},
  resolve:{...},
  module:{...},
  externals:{
    "echarts":"echarts" //不打包的包名
  }
}

然后在 index.html 中用 <script></script> 標(biāo)簽引入依賴包的CDN或者其他地址。

優(yōu)化步驟5：圖片壓縮

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

優(yōu)化后

通過這幾步驟，優(yōu)化完成的每個(gè)文件都會縮小好多倍：

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)文章

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具