優化Vue項目,減小打包體積

我們在打包Vue項目時經常會遇到打包出來的項目特别大，放在伺服器上加載首頁特别慢，如圖：

下面我來介紹幾種我常用的減少項目大小的方式：

一.去除.map.js檔案

在vue.config.js配置檔案中

module.exports = {
    productionSourceMap:false
}
           

二.使用router懶加載

使用以下方式把不同路由對應的元件分割成不同的代碼塊，然後當路由被通路的時候才加載對應元件

三. 使用cdn引入元件

穩定、快速、免費的前端開源項目 CDN 加速服務(BootCDN)

• 在index.html中引入cdn的js和css，拿element-ui示例（注意引入element-ui需要先引入Vue）

<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>
           

• 在vue.config.js中配置

module.exports = {
    configureWebpack:{
        //引入cdn中的vue和element-ui
        externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT'
        }
    }
}
           

注意：如果啟動報錯，看看babel.config.js檔案中是否有下面幾行代碼，如果有則注釋掉

plugins: [
   [
     "component",
     {
       "libraryName":"element-ui",
       "styleLibraryName":"theme-chalk"
     }
   ]
 ]
           

四. 針對圖檔進行壓縮（兩種方式）

1、壓縮本地圖檔

• 壓縮圖檔網站(tinypng)
• 壓縮圖檔網站(compressjpeg)

2、将圖檔上傳到雲伺服器取位址顯示