Vue專案優化打包——前端加分項

前言
Vue專案開發完畢後，對專案進行打包釋出之前，必不可少的操作就是專案優化，這也是程式猿的加分項。跟隨本文的腳步來看看如何對專案進行優化吧~

一、路由懶載入

為什麼需要路由懶載入
當剛執行專案的時候，發現剛進入頁面，就將所有的js檔案和css檔案載入了進來，這一程式十分的消耗時間。如果開啟哪個頁面就對應的載入響應頁面的js檔案和css檔案，那麼頁面載入速度會大大提升。
如何實現路由懶載入
vue官方文件：路由懶載入程式碼如下（示例）:

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
複製程式碼

路由懶載入中的魔法註釋
通過在註釋中指定webpackChunkName，可以自定義這個檔案的名字。程式碼如下（示例）:

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")
複製程式碼

二、分析包大小

需求
想要知道打包生成的檔案中，每個檔案所佔的空間大小。以便於我們分析，對程式碼進行優化處理。
如何生成打包分析檔案
終端中執行 npm run preview -- --report, 這個命令會從我們的入口main.js進行依賴分析，分析出各個包的大小。最終會在生成的dist資料夾下生成一個report.html的檔案，開啟後就可以看到我們在專案使用檔案佔據的空間大小啦~

(效果圖如下：)

三、webpack配置排除打包

需求
將一些不常用的包，排除在生成的打包檔案以外。例如：上圖所示的xsxl.js 、 element.js，可以將其排除在打包生成的檔案以外
排除打包
找到 vue.config.js，新增 externals 項，具體如下：

程式碼如下（示例）：

configureWebpack: {
  // 配置單頁應用程式的頁面的標題
  name: name,
  externals: {
     /**
      * externals 物件屬性解析。
      *  基本格式：
      *     '包名' : '在專案中引入的名字'
      *  
    */
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}
複製程式碼

四、引用網路資源

需求
我們進行了上一步操作以後，打包生成後的包小了很多。但是呢，沒有這些依賴包的話，專案上線是沒有辦法執行的。那麼就需要引用網路中的資源，來支援我們程式碼的執行。
CDN
CDN全稱叫做“Content Delivery Network”，中文叫內容分發網路。我們用它來提高訪問速度
把一些靜態資源：css， .js，圖片，視訊放在第三方的CDN伺服器上，可以加速訪問速度。
好處：

減少應用打包出來的包體積
加快靜態資源的訪問
利用瀏覽器快取，不會變動的檔案長期快取

實現步驟
注意:在開發環境時，檔案資源還是可以從本地node_modules中取出，而只有專案上線了，才需要去使用外部資源。此時我們可以使用環境變數來進行區分。具體如下：

程式碼如下（示例）：

在vue.config.js檔案中:

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判斷是否是生產環境
if (isProduction) {
  externals = {
      /**
      * externals 物件屬性解析：
      * '包名' : '在專案中引入的名字'
    */
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 樣式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
    ]
  }
}
複製程式碼

webpack配置externals配置項

configureWebpack: {
  // 配置單頁應用程式的頁面的標題
  name: name,
  externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}
複製程式碼

通過 html-webpack-plugin注入到 index.html之中: 在vue.config.js檔案中配置:

chainWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])
  // 注入cdn變數 (打包時會執行)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // 配置cdn給外掛
    return args
  })
  // 省略其他...
}
複製程式碼

找到 public/index.html 通過配置CDN Config 依次注入 css 和 js。修改head的內容如下:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>

      <!-- 引入樣式 -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
        <% } %>


    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>
  </head>
複製程式碼

五、打包去除console.log

需求
在專案打包上線後，去除掉程式碼中所有的console.log
程式碼演示
在vue.config.js檔案中配置：程式碼如下（示例）：

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}

最後
如果你覺得此文對你有一丁點幫助，點個贊。或者可以加入我的開發交流群：1025263163相互學習，我們會有專業的技術答疑解惑

如果你覺得這篇文章對你有點用的話，麻煩請給我們的開源專案點點star: https://gitee.com/ZhongBangKe...不勝感激！

Vue專案優化打包——前端加分項

相關文章