Vue 打包的優化（縮小包大小，減小首屏加載時間）

時間 2019-11-09

標籤 vue 打包優化縮小大小減小加載時間简体版

原文原文鏈接

畢竟但願本身是個追求極致的人，因此會繼續努力，下面只是本身遇到的，相同相似的方法你們能夠探討琢磨，讓項目更好
複製代碼

1. 處理方式

CDN 加載三方庫
忽略 moment.js 語言庫
ant-design-vue 按需加載icons，組件

2. 對比

未處理以前
處理以後

包的大小已經很小了，雖然首屏加載一秒還能夠接受，不過能少點，就要少一點！

3. 具體操做步驟

3.1 CDN 加載三方庫

首先運行一條命令 npm uninstall moment axios vuex vue-router，對沒有錯，就是要刪了這些依賴包，煩人的東西！

去 CDN 網站，尋找你想要的，例如：搜索vue，哈哈哈開玩笑了！傳送門 https://www.bootcdn.cn/, 這是國內的

找到你的包，複製其標籤，獲得以下內容：<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

將其放在 /public/index.html, <head>標籤中此時大家須要一張圖

修改 vue.config.js 配置
module.exports = {
   configureWebpack: {
      // CDN 加載組件
      externals: {
          'vue-router': 'VueRouter',
          Vuex: 'Vuex',
          axios: 'axios',
          moment: 'moment'
   }
 }
複製代碼

到這裏，你就能夠放心了，這些東西會經過請求到項目中，不會打包進入，你已經省出了 1 秒鐘的首屏加載時間，讓咱們繼續優化！css

3.2 moment.js

moment.js 是真的挺大，最終要的是大無所謂，可是有不少沒用的語言包卻妨礙我了
我根本不想要那麼多國家的溝通，我只想要咱們大中華的語言庫，因此，幹掉其它語言庫是咱們首要的任務
看看咱們打包分析報告，一堆沒用的玩意，看着就難受

看看咱們收拾了一頓以後

想要這個改變，就只須要一句話

module.exports = {
   configureWebpack: {
       // 忽略moment其它語言庫
      plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
   }
 }
複製代碼

3.3 ant-design-vue

是我經常使用的UI庫，好看，方便，文檔齊全，可是打包的時候也不盡人意html

一樣看看咱們打包分析報告，我想說：你給我，去（排泄物）

看看改變

一樣一句話就搞定

module.exports = {
   configureWebpack: {
      resolve: {
         alias: {
           '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js')
    }
 }
複製代碼

那是不可能的咱們還須要在src文件夾下面加一個文件 icons.jsvue

//本身項目裏面用到的Icon
export {
  default as DownOutline
} from '@ant-design/icons/lib/outline/DownOutline'`
複製代碼

今後之後雖然很舒服的減少了打包大小，不過咱們必須手動引入全部使用的icon，唉，誰讓咱們想追求項目的最好狀態呢，以上都是本人遇到內容優化若是你們有什麼更好的方案，咱們評論區見webpack

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。