Vue項目優化打包詳解

Posted on by

前言

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

一、路由懶加載

1.為什麼需要路由懶加載

當剛運行項目的時候，發現剛進入頁面，就將所有的js文件和css文件加載瞭進來，這一進程十分的消耗時間。 如果打開哪個頁面就對應的加載響應頁面的js文件和css文件，那麼頁面加載速度會大大提升。

2.如何實現路由懶加載

vue官方文檔：路由懶加載

代碼如下（示例）:

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
復制代碼

3.路由懶加載中的魔法註釋

通過在註釋中指定webpackChunkName，可以自定義這個文件的名字。 代碼如下（示例）:

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")
復制代碼

二、分析包大小

1.需求

想要知道打包生成的文件中，每個文件所占的空間大小。以便於我們分析，對代碼進行優化處理。

2.如何生成打包分析文件

終端中運行 npm run preview – –report, 這個命令會從我們的入口main.js進行依賴分析，分析出各個包的大小。最終會在生成的dist文件夾下生成一個report.html的文件，打開後就可以看到我們在項目使用文件占據的空間大小啦~

(效果圖如下：)

在這裡插入圖片描述

三、webpack配置排除打包

1.需求

將一些不常用的包，排除在生成的打包文件以外。 例如：上圖所示的xsxl.js 、 element.js，可以將其排除在打包生成的文件以外

2.排除打包

找到 vue.config.js， 添加 externals 項，具體如下：

代碼如下（示例）：

configureWebpack: {
  // 配置單頁應用程序的頁面的標題
  name: name,
  externals: {
     /**
      * externals 對象屬性解析。
      *  基本格式：
      *     '包名' : '在項目中引入的名字'
      *  
    */
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}
復制代碼

四、 引用網絡資源

1.需求

我們進行瞭上一步操作以後，打包生成後的包小瞭很多。但是呢，沒有這些依賴包的話，項目上線是沒有辦法運行的。那麼就需要引用網絡中的資源，來支持我們代碼的運行。

2.CDN

CDN全稱叫做“Content Delivery Network”，中文叫內容分發網絡。我們用它來提高訪問速度
把一些靜態資源：css， .js，圖片，視頻放在第三方的CDN服務器上，可以加速訪問速度。

好處：

  • 減少應用打包出來的包體積
  • 加快靜態資源的訪問
  • 利用瀏覽器緩存，不會變動的文件長期緩存

3. 實現步驟

註意:在開發環境時，文件資源還是可以從本地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/[email protected]/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/[email protected]/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="<%=%20BASE_URL%20%>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

1.需求

在項目打包上線後，去除掉代碼中所有的console.log

2.代碼演示

在vue.config.js文件中配置： 代碼如下（示例）：

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：