Vue項(xiàng)目中打包優(yōu)化的四種方法詳解

更新時(shí)間：2022年07月18日 09:16:28 作者：smouns_

最近入職了新公司,接手了一個(gè)新拆分出來(lái)的Vue項(xiàng)目,針對(duì)該項(xiàng)目做了個(gè)打包優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中打包優(yōu)化的四種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

默認(rèn)情況下，通過(guò)import語(yǔ)法導(dǎo)入的第三方依賴包，最終會(huì)全部打包到一個(gè)js文件中，會(huì)導(dǎo)致單文件體積過(guò)大大，在網(wǎng)速底下時(shí)會(huì)阻塞網(wǎng)頁(yè)加載，影響用戶體驗(yàn)。

打包優(yōu)化的目的:

1、項(xiàng)目啟動(dòng)速度，和性能

2、必要的清理數(shù)據(jù)

3、減少打包后的體積

第一點(diǎn)是核心，第二點(diǎn)呢其實(shí)主要是清理console

性能優(yōu)化的主要方向:

路由懶加載

去除生產(chǎn)版console.log的打印輸出

開(kāi)發(fā)版使用依賴項(xiàng)，生產(chǎn)版使用在線CDN

項(xiàng)目打包及配置

1.異步組件配置(路由懶加載)

一上來(lái)加載所有的組件, 首屏加載就比較慢, 可以配置路由按需加載

當(dāng)打包構(gòu)建項(xiàng)目時(shí)，js包會(huì)變得非常大，影響頁(yè)面加載，我們把不同路由的對(duì)應(yīng)組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候加載對(duì)應(yīng)的組件，這樣能提升訪問(wèn)效率。

切分之后，并不是瀏覽器訪問(wèn)某個(gè)路由，才去下載對(duì)應(yīng)的模塊，仍然在首次訪問(wèn)程序時(shí)，下載所有模塊，只不過(guò)每個(gè)模塊分的很小，加載首頁(yè)時(shí)需要的模塊能夠更快的下載下來(lái)，所以能夠更快的顯示

具體分三步：

安裝包 npm install --save-dev @babel/plugin-syntax-dynamic-impor
在babel.config.js配置文件中加入插件
將路由改為按需加載的形式

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/Login',
    name: 'Login',
    // 路由懶加載
    component: () => import('../views/Login/index.vue')
  },
  {
    path: '/',
    component: () => import('../views/layout/index.vue'),
    children: [
      {
        path: '',
        component: () => import('../views/Home/index.vue')
      }
    ]
  }
]
 
//或者如下
 
const Login = () => import('@/views/Login')
const Reg = () => import('@/views/Reg')
const Layout = () => import('@/views/Layout')

2.去掉打包后的 console

打包上線后的console語(yǔ)句沒(méi)有任何作用，所以我們應(yīng)該移除它，除去手動(dòng)移除，還可以使用插件的方式來(lái)移除代碼里的console語(yǔ)句。

安裝依賴 : yarn add terser-webpack-plugin -D (npm i terser-webpack-plugin -D)

在vue.config.js修改配置文件

// 獲取當(dāng)前的打包環(huán)境(具體文章最后會(huì)說(shuō)明)
const env = process.env.NODE_ENV
// 覆蓋默認(rèn)的webpack配置
module.exports = {
  publicPath: './',  //首次加載白屏(打包后文件路徑問(wèn)題)
  devServer: {
    port: 3000,
    open: true
  },
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  } 
}

3.使用CDN

使用CDN，減少包的體積。將線上環(huán)境中用到的一些依賴，使用CDN網(wǎng)絡(luò)節(jié)點(diǎn)的方式進(jìn)行引用，而不是直接打包到包里。

項(xiàng)目開(kāi)發(fā)階段和生產(chǎn)階段不一樣，我們?cè)陂_(kāi)發(fā)階段還是要使用import導(dǎo)入依賴的方式來(lái)進(jìn)行開(kāi)發(fā)，在生產(chǎn)階段再配置CDN外鏈來(lái)獲取項(xiàng)目依賴。

默認(rèn)情況下，Vue項(xiàng)目的開(kāi)發(fā)模式和發(fā)布模式，共同使用一個(gè)打包的入口文件（src/main.js）為了將項(xiàng)目的開(kāi)發(fā)過(guò)程與發(fā)布過(guò)程分離，我們可以分別使用兩個(gè)入口文件，一個(gè)用于開(kāi)發(fā)環(huán)境打包(這個(gè)就是main.js)，一個(gè)用于生產(chǎn)環(huán)境打包

在vue.config.js中

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development';
 
// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false
 
// cdn鏈接
const cdn = {
    // cdn：模塊名稱和模塊作用域命名（對(duì)應(yīng)window里面掛載的變量名稱）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress',
        'axios': 'axios'
    },
    // cdn的css鏈接
    css: [
        
    ],
    // cdn的js鏈接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
    ]
}
 
module.exports = {
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生產(chǎn)環(huán)境或本地需要cdn時(shí)，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============
    },
    configureWebpack: config => {
        // 用cdn方式引入，則構(gòu)建時(shí)要忽略相關(guān)資源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }
}

 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.css) { %>
  <link
          href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" 
          rel="stylesheet"
  />
  <% } %>
  <!-- 使用CDN的CSS文件 -->
 
 
  <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!-- 使用CDN的JS文件 -->

4.yarn build生成dist目錄

得到一個(gè)dist目錄,這個(gè)目錄包含了項(xiàng)目中所有的頁(yè)面,樣式,業(yè)務(wù), 第三方包, 默認(rèn)html文件中引入了資源文件是以項(xiàng)目根目錄引入的, 雙擊目前是打開(kāi)不了的可以借助vscode中的live-sever

打包的過(guò)程中, 會(huì)對(duì)代碼進(jìn)行壓縮合并, 版本降級(jí), 語(yǔ)法轉(zhuǎn)換等...

module.exports = {
  publicPath: './',  //解決路徑問(wèn)題
  devServer: {
    port: 3000,   //改變端口號(hào)
    open: true    //運(yùn)行后,自動(dòng)打開(kāi)瀏覽器運(yùn)行
  }
}