webpack打包首頁如何優化及路由懶載入？本文詳解

来源:https://www.cnblogs.com/chengxuyuanaa/archive/2020/06/08/13068628.html
-Advertisement-
Play Games

前言 最近做了一個小型的vue的h5項目，發現在手機上運行的時候，第一次進去的首頁比較慢，然後同事提了下可以在生產環境用cdn，於是我嘗試了下 生產環境開啟cdn 1、 在vue.congfig.js裡面加入 const isProduction = process.env.NODE_ENV == ...


 

前言

最近做了一個小型的vue的h5項目，發現在手機上運行的時候，第一次進去的首頁比較慢，然後同事提了下可以在生產環境用cdn，於是我嘗試了下

生產環境開啟cdn

1、 在vue.congfig.js裡面加入

const isProduction = process.env.NODE_ENV == "production";
 configureWebpack: (config) => {
    if (isProduction) {
      config.externals = {
        vue: "Vue",
        "vue-router": "VueRouter",
        vant: "vant",
        _: "lodash",
      };
另外註意：光理論是不夠的。在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

externals是讓裡面的庫不被webapck打包，也不影響通過import（或者其他AMD、CMD等）方式引入

2、 在index.html引入cdn資源

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.core.min.js"></script> 
複製代碼

3、 優化下寫法

// vue.config.js

const cdn = {
  css: ["https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"],
  js: [
    "https://cdn.jsdelivr.net/npm/[email protected]",
    "https://unpkg.com/vue-router/dist/vue-router.js",
    "https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js",
    "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.core.min.js",
  ],
};


chainWebpack: (config) => {
    if (isProduction) {
      config.plugin("html").tap((args) => {
        args[0].cdn = cdn;
        return args;
      });
    }
  }
 
 // index.html
   <% for(var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css){%>
  <link src="<%= htmlWebpackPlugin.options.cdn.css[i] %>"></link>
  <%}%>
  <% for(var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js){%>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <%}%>
複製代碼

優化前

優化後

 

 

 

開啟gzip壓縮


cnpm install compression-webpack-plugin --save-dev 

// vue.config.js
const CompressionPlugin = require("compression-webpack-plugin");

 configureWebpack: (config) => {
    if (isProduction) {
      config.externals = {
        vue: "Vue",
        "vue-router": "VueRouter",
        vant: "vant",
        _: "lodash",
      };
      config.plugins.push(
        new CompressionPlugin({
          algorithm: "gzip",
        })
      );
    }
  },
複製代碼

路由懶載入

  {
    path: "/index",
    name: "index",
    component: () => import("../views/index.vue"),
    meta: {
      keepAlive: false,
    },
  },
複製代碼

平常當中經常這麼寫，只不過你可能不知道這就是路由懶載入。官網，官網上提到這是由於非同步組件和weback的代碼分割code-splitting功能，每個非同步路由會打包成不同的塊，實現按需載入。除了上面的ES2015模塊的寫法，它還有

 {
    path: "/index",
    name: "index",
    component: (resolve) => require(["../views/index.vue"], resolve),
    meta: {
      keepAlive: false,
    },
  },
複製代碼

根據官網提到的，首先創建一個返回Promise的工廠函數

const Index = () => Promise.resolve({ /* 組件定義對象 */ })
複製代碼

然後用動態 import語法定義代碼分塊的分割點

import ('./Index')
複製代碼

兩者結合，就可以自動分割代碼

const Index = () => import('../views/index.vue')
複製代碼

先看了下這個code-split，

 

 

然後去看了下vue-cli的具體配置，路由已經是Dynamic Import，如上圖第二點提到. 下麵說說針對於chunk-vendors的分割，正如上圖第三點提到，配置splitChunks是了重覆數據刪除和分割chunks

optimization(開發和生產都是一樣的)

optimization:{
      splitChunks: {
        cacheGroups: {  // 緩存組，可以定義多個
          vendors: {     //創建一個 自定義的vendor的chunk
            name: "chunk-vendors",
            test: /[\\\/]node_modules[\\\/]/,  // 匹配node_modules
            priority: -10,  // 理解為緩存的級別
            chunks: "initial",
        },
          common: {
            name: "chunk-common",
            minChunks: 2,  // 分割之前必須共用模塊的最小chunk數
            priority: -20,
            chunks: "initial",
            reuseExistingChunk: true,  // 是否復用存在的塊
        },
      },
    } 
}
 
複製代碼
  • cacheGroups 緩存組，可以定義多個
 cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
複製代碼
  • priority 緩存組的級別

A module can belong to multiple cache groups. The optimization will prefer the cache group with a higher priority. The default groups have a negative priority to allow custom groups to take higher priority (default value is 0 for custom groups)

翻譯過來大概就是一個模塊可以有多個cash groups，optimization將會選擇優先順序更高的cash group, default group 的優先順序為負數，可以允許custom group有更高的優先順序（預設值是0）。 簡而言之，custom group可以通過priority比default group高

  • reuseExistingChunk 是否復用存在的塊

output配置有些不同

// 生產
  output: {
    path:"/dist",
    filename: "static/js/[name].[contenthash:8].js",
    publicPath: "/",
    chunkFilename: "static/js/[name].[contenthash:8].js",  // 生成一個8位的hash值
  }
  
 // 開發
   output: {
    path:"/dist",
    filename: "static/js/[name].js",
    publicPath: "/",
    chunkFilename: "static/js/[name].js",
  }
複製代碼

運行打包

 

 

生產輸出了css,而開發環境沒有,估計是生產配置了這句

  // 生產
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[contenthash:8].css",
      chunkFilename: "static/css/[name].[contenthash:8].css",
    })
複製代碼

那麼問題來了

  • 開發模式打包出來文件的css到底怎麼引入的
  • 打包出來的dist的index.html的link和script標簽引入的文件為何不同
  • preload 和 prefetch的區別
// development
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="/favicon.ico">
  <title>南藍</title>
 
  <link href="/static/js/0.js" rel="prefetch"><link href="/static/js/1.js" rel="prefetch"><link href="/static/js/2.js" rel="prefetch">
  <link href="/static/js/3.js" rel="prefetch">
  <link href="/static/js/app.js" rel="preload" as="script">
  <link href="/static/js/chunk-vendors.js" rel="preload" as="script">
</head>
<body>
  <noscript>
    <strong>We're sorry but f2e-client doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
<script type="text/javascript" src="/static/js/chunk-vendors.js"></script><script type="text/javascript" src="/static/js/app.js"></script></body>

</html>
複製代碼

再來看看生產打包出來的index.html(production)

// production
<!DOCTYPE html>
<html lang=en>
<head>
   <meta charset=utf-8>
   <meta http-equiv=X-UA-Compatible content="IE=edge">
   <meta name=viewport content="width=device-width,initial-scale=1">
   <link rel=icon href=/favicon.ico>
   <title>鴨嘴獸</title>
   <script src=https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css></script>
   <script src=https://cdn.jsdelivr.net/npm/[email protected]></script>
   <script src=https://unpkg.com/vue-router/dist/vue-router.js></script>
   <script src=https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js></script>
   <script src=https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.core.min.js></script>
   <link href=/static/css/chunk-0c3564fc.b3594289.css rel=prefetch>
   <link href=/static/css/chunk-56255d30.c1e34d24.css rel=prefetch>
   <link href=/static/css/chunk-5ba5813d.a56f098f.css rel=prefetch>
   <link href=/static/css/chunk-9945b478.66fcd057.css rel=prefetch>
   <link href=/static/js/chunk-0c3564fc.9d02dfcc.js rel=prefetch>
   <link href=/static/js/chunk-56255d30.d0115acd.js rel=prefetch>
   <link href=/static/js/chunk-5ba5813d.10f75234.js rel=prefetch>
   <link href=/static/js/chunk-9945b478.dc8a4502.js rel=prefetch>
   <link href=/static/css/app.faa29057.css rel=preload as=style>
   <link href=/static/css/chunk-vendors.97c56160.css rel=preload as=style>
   <link href=/static/js/app.5deb2d45.js rel=preload as=script>
   <link href=/static/js/chunk-vendors.158e0179.js rel=preload as=script>
   <link href=/static/css/chunk-vendors.97c56160.css rel=stylesheet>
   <link href=/static/css/app.faa29057.css rel=stylesheet>
</head>

<body>
<noscript><strong>We're sorry but f2e-client doesn't work properly without JavaScript enabled. Please enable it to
           continue.</strong></noscript>
   <div id=app></div>
   <script src=/static/js/chunk-vendors.158e0179.js></script>
   <script src=/static/js/app.5deb2d45.js></script>
</body>

</html>
複製代碼
  • 為啥有些js用link標簽引入，有些用scipt標簽引入
  • link的as屬性為啥有時有時無

 

 

彈出vue-cli配置webpack設置

開發換環境 npx vue-cli-service inspect --mode development  webpack.config.development.js
生產環境：npx vue-cli-service inspect --mode production  webpack.config.production.js
複製代碼

不管前端輪子怎麼變化，萬變不離其宗，這個宗指的就是html、css、js，所有要回歸本質上去,我提出的那些問題，希望下次出篇文章弄懂它，有錯誤或者有建議可以提出來
最後註意：光理論是不夠的。在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 開發學習進程0.14
    ##BindView ButterKnife 優勢 綁定組件方便，使用簡單 處理點擊事件方便，如adapter中的viewholder 同時父組件綁定後子組件無需綁定 註意 在setcontentview之後使用，且子空間不可再使用static final屬性 ##在不改變按鈕圖片大小的情況，擴大點 ...
  • Android 開發技術周報 Issue#283
    新聞 Android 11特性調整：安裝外部來源應用需要重啟APP Google Messages beta版迎來一個新的搜索框 Android開發者生態永遠比不上iOS？“聯盟與公約”們正改變這一點 谷歌新款Android TV串流設備外形曝光：代號Sabrina Android 11 Beta引 ...
  • iOS APP運行時Crash自動修複系統
    前言 大白（Baymax），迪士尼動畫《超能陸戰隊》中的健康機器人，是一個體型胖胖的充氣機器人，因呆萌的外表和善良的本質獲得大家的喜愛，被稱為“萌神”。 Baymax項目是為了減少開發人員在開發中一些不規範的代碼編寫造成的記憶體泄露，界面卡頓，耗電等問題而來的一個監控系統。 現在Baymax迎來了它新 ...
  • Vuex源碼閱讀(一) new Vuex.Store()內部探究
    Vuex源碼閱讀(一) ，介紹Vuex的執行順序，以及new Vuex.Store()的時候內部都幹了什麼。 ...
  • JavaScript 仿 flash 輪播圖
    效果展示 頁面截圖 相關效果 預覽 html 頁面 從微信讀書上找了幾張書籍封面來做輪播的圖片。 index.html <body> <div id="container"> <div class="big_pic_div"> <div class="prev"></div> <div class= ...
  • vue 3.x 如何高效學成？本文詳解
    前言 本文所分享的是關於 vue 3.x 在用法上的改變，而不是在代碼實現上的不同。 雖然 vue2 到 vue3 的實現大改，但在用法上變化基本不大，比較明顯的一個變化就是添加了 setup(){} 函數了，幾乎所有的配置變成了以函數的方式進行定義。即使是這樣，但小改動還是很多的。本文主要分享的是 ...
  • 如何用webpack搭建vue項目？本文案例詳解
    前言：都2020年了，感覺是時候該學一波webpack了，趁著最近有時間，就學了一下，等把官網上的webpack結構和模塊大概看了一遍之後，就感覺可以開始搭個項目實戰一下了，從0開始，一步步記錄下來 使用版本： webpack4.x 1.包含插件和loader * html: html-webpac ...
  • TypeScript考試題來了，60%的人不會（附答案）
    前言 1.相信這段時間來，對 TypeScript 感興趣的小伙伴們已經把這個神器給系統的學習了一遍了吧。如果計劃開始學習但是還沒有開始，或者沒有找到資料的同學，可以看下我在之前文章中 前端進階指南 找一下 TypeScript 部分的教程，自行學習。 本文從最近在 Github 上比較火的倉庫 t ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類