性能優(yōu)化概述

1.分包策略

Vite和Webpack都支持性能優(yōu)化-分包策略，下面簡(jiǎn)要介紹一下它們的實(shí)現(xiàn)方法：

Vite分包策略

Vite是一款基于ESM的構(gòu)建工具，Vite的分包策略主要通過(guò)動(dòng)態(tài)引入實(shí)現(xiàn)，可以自動(dòng)進(jìn)行代碼拆分，實(shí)現(xiàn)按需加載和運(yùn)行時(shí)優(yōu)化。在Javascript中，可以使用ES6的import()語(yǔ)法來(lái)實(shí)現(xiàn)動(dòng)態(tài)引入：

const module = import('./module.js');

Vite還支持使用預(yù)構(gòu)建Chunk來(lái)優(yōu)化加載速度，可以在vite.config.js文件中設(shè)置rollupOptions項(xiàng)來(lái)實(shí)現(xiàn)預(yù)構(gòu)建Chunk：

module.exports = {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
};

除了動(dòng)態(tài)引入和預(yù)構(gòu)建Chunk，Vite還支持手動(dòng)配置Chunk，以實(shí)現(xiàn)更細(xì)粒度的控制。可以使用 import.meta.glob() 函數(shù)來(lái)匹配文件對(duì) Chunk 進(jìn)行手動(dòng)配置。

import.meta.glob('../components/*.js').then(modules => {
  Promise.all(modules.values()).then(components => {
    // ...
  })
})

Webpack分包策略

Webpack可以使用以下方式實(shí)現(xiàn)分包策略：

• 使用代碼分割插件(Model Splitting)

通過(guò)代碼分割插件在構(gòu)建過(guò)程中實(shí)現(xiàn)自動(dòng)化的代碼分割。

const path = require('path');
module.exports = {
? entry: {
? ? app: './src/app.js'
? },
? output: {
? ? path: path.resolve(__dirname, 'dist'),
? ? filename: '[name].bundle.js'
? },
? optimization: {
? ? splitChunks: {
? ? ? chunks: 'all'
? ? }
? }
};

• 使用動(dòng)態(tài)導(dǎo)入(Dynamic Imports)

通過(guò)動(dòng)態(tài)導(dǎo)入將代碼拆分成多個(gè)小塊，按需加載。

import('./module.js')
  .then((module) => {
    // ...
  })
  .catch((err) => {
    // ...
  });

Webpack還支持使用webpackPrefetch和webpackPreload來(lái)實(shí)現(xiàn)預(yù)加載預(yù)取的功能，提高用戶體驗(yàn)。

// webpackPreload
const Component = () => import(/* webpackPreload: true */ './Component.js');
// webpackPrefetch
const Component = () => import(/* webpackPrefetch: true */ './Component.js');

以上就是Vite和Webpack的分包策略實(shí)現(xiàn)方法和代碼示例。

2.gzip壓縮

Vite和Webpack都提供了Gzip壓縮的功能，以便在前端性能優(yōu)化中使用。

在Vite中，可以通過(guò)在vite.config.js中設(shè)置compress參數(shù)來(lái)開(kāi)啟Gzip壓縮：

// vite.config.js

export default {
? server: {
? ? compress: true
? }
}

在Webpack中，可以通過(guò)在webpack.config.js中配置CompressionPlugin插件來(lái)開(kāi)啟Gzip壓縮：

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
? plugins: [
? ? new CompressionPlugin({
? ? ? algorithm: 'gzip'
? ? })
? ]
};

這些配置將為我們自動(dòng)壓縮生成的文件，并在傳輸?shù)娇蛻舳藭r(shí)解壓文件以提高性能。
值得注意的是，由于Gzip壓縮需要花費(fèi)一些CPU時(shí)間，建議在服務(wù)器端啟用壓縮。如果你正在使用CDN，你也可以在CDN端配置Gzip壓縮。

3.動(dòng)態(tài)引入

Webpack和Vite都支持使用動(dòng)態(tài)引入來(lái)提高前端性能。動(dòng)態(tài)引入的主要作用是延遲加載，只在需要的時(shí)候才加載相關(guān)的模塊，減少了首次加載時(shí)的負(fù)擔(dān)。

在Vite中，可以實(shí)現(xiàn)動(dòng)態(tài)引入的幾種方式：

使用ES6動(dòng)態(tài)導(dǎo)入語(yǔ)法

import('./path/to/module').then(result => {
  // do something with the module
}).catch(error => {
  // handle error
});

這將以異步方式加載模塊，可以在需要時(shí)動(dòng)態(tài)引入。

在組件的setup函數(shù)中使用異步加載

import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
? setup() {
? ? const moduleRef = ref(null);
? ? onMounted(async () => {
? ? ? const result = await import('./path/to/module');
? ? ? moduleRef.value = result;
? ? });
? ? return {
? ? ? moduleRef,
? ? };
? },
});

這種方式使用了Vue 3中的setup函數(shù)，使用Promise來(lái)異步加載模塊，并將結(jié)果存儲(chǔ)在ref中。

使用異步組件

const AsyncComponent = defineAsyncComponent(() => import('./path/to/module'));
export default defineComponent({
? components: {
? ? AsyncComponent,
? },
? template: `<AsyncComponent />`,
});

這里使用了Vue 3中的defineAsyncComponent函數(shù)，通過(guò)傳入異步加載模塊的路徑來(lái)創(chuàng)建異步組件。這樣組件的加載過(guò)程將會(huì)被延遲到當(dāng)組件被使用時(shí)再進(jìn)行。
需要注意的是，為了使動(dòng)態(tài)引入能夠真正發(fā)揮作用，還需要配置Vite的按需動(dòng)態(tài)導(dǎo)入功能。在vite.config.js文件中，可以通過(guò)設(shè)置rollupOptions參數(shù)來(lái)開(kāi)啟此功能：

// vite.config.js
export default {
? rollupOptions: {
? ? output: {
? ? ? manualChunks: {},
? ? },
? },
};

此配置將分離每個(gè)動(dòng)態(tài)導(dǎo)入的文件，并生成一個(gè)獨(dú)立的代碼塊。這樣可以按需加載模塊，從而提高性能。

在Webpack中，可以實(shí)現(xiàn)動(dòng)態(tài)引入的幾種方式：

使用ES6動(dòng)態(tài)導(dǎo)入語(yǔ)法

import('./path/to/module').then(result => {
  // do something with the module
}).catch(error => {
  // handle error
});

這將以異步方式加載模塊，可以在需要時(shí)動(dòng)態(tài)引入。

在React懶加載組件中使用

const MyComponent = lazy(() => import('./path/to/module'));

使用了React.lazy()函數(shù)來(lái)實(shí)現(xiàn)懶加載。此函數(shù)接受一個(gè)返回動(dòng)態(tài)加載模塊的import()函數(shù)的參數(shù)。

使用webpack的內(nèi)置require.ensure()

require.ensure(['./path/to/module'], function (require) {
  var result = require('./path/to/module');
  // do something with the module
});

這種方式使用了webpack的內(nèi)置函數(shù)require.ensure()，可以將塊（chunk）分離出來(lái)并延遲加載模塊。
在使用動(dòng)態(tài)引入時(shí)，還可以通過(guò)配置webpack的output.publicPath屬性，將異步塊的基礎(chǔ)路徑設(shè)置為CDN地址，以加快異步加載速度。例如：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'https://cdn.example.com/'
}

需要注意的是，在使用動(dòng)態(tài)引入時(shí)，還需要配置webpack的代碼分離和優(yōu)化功能。可以通過(guò)在webpack.config.js文件中設(shè)置optimization.splitChunks來(lái)實(shí)現(xiàn)此目的：

optimization: {
  splitChunks: {
    chunks: 'async',
    minSize: 20000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 30,
    maxInitialRequests: 30,
    enforceSizeThreshold: 50000,
    cacheGroups: {
      defaultVendors: {
        test: /[\/]node_modules[\/]/,
        priority: -10,
        reuseExistingChunk: true,
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true,
      },
    },
  },
},

這樣，webpack會(huì)自動(dòng)分離出符合條件的模塊，生成獨(dú)立的代碼塊，在需要時(shí)進(jìn)行加載。
值得注意的是，動(dòng)態(tài)引入雖然可以優(yōu)化首次加載時(shí)間，但在使用多個(gè)包時(shí)可能會(huì)導(dǎo)致過(guò)多的HTTP請(qǐng)求，這可能導(dǎo)致首屏渲染延遲。因此，需要根據(jù)實(shí)際情況選擇何時(shí)使用動(dòng)態(tài)引入。

補(bǔ)充：

為了避免這些問(wèn)題，并且進(jìn)一步提高性能，可以采用以下一些方法：

預(yù)加載和預(yù)取。在Webpack中，可以使用webpackPrefetch和webpackPreload注釋，以啟用自動(dòng)預(yù)取和/或預(yù)加載。例如：

import(/* webpackPrefetch: true */ './path/to/module');

這將告訴瀏覽器提前下載此模塊，以便在需要時(shí)立即加載。

按用戶需求加載。如果你有一些模塊是高頻訪問(wèn)的，那么可以在頁(yè)面加載時(shí)先加載這些模塊，而將其他模塊延遲加載。這樣可以防止不必要的HTTP請(qǐng)求，并加快頁(yè)面響應(yīng)速度。
避免過(guò)多的動(dòng)態(tài)引入。雖然動(dòng)態(tài)引入可以解決代碼分離的問(wèn)題，但是如果不加以控制，也可能導(dǎo)致模塊的數(shù)量過(guò)于龐大，進(jìn)而導(dǎo)致過(guò)多的HTTP請(qǐng)求和降低性能的可能。因此，在使用動(dòng)態(tài)引入時(shí)，必須注意模塊數(shù)量的把握，避免過(guò)度動(dòng)態(tài)引入。

4.CDN加速

Vite和Webpack都支持使用CDN加速來(lái)優(yōu)化前端性能。使用CDN可以將靜態(tài)資源放置在離用戶更近、更容易訪問(wèn)的地方，這樣可以減少網(wǎng)絡(luò)延遲，加快資源加載速度。

在Vite中，可以通過(guò)以下方式來(lái)使用CDN資源加速：

在 vite.config.js 文件中設(shè)置 base 屬性

export default {
  base: 'https://cdn.example.com/',
  // ...
}

設(shè)置 base 屬性后，資源的 baseURL 將會(huì)被設(shè)置為此處的值，JavaScript、CSS、圖片等靜態(tài)資源都將從這個(gè)地址加載。

在 index.html 文件中手動(dòng)引入 CDN 資源

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
    <link rel="stylesheet"  rel="external nofollow" >
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

這種方式可以手動(dòng)指定要加載的靜態(tài)資源，并從CDN加載，但需要注意的是，這種方式可能會(huì)增加HTML文件的大小和復(fù)雜度。

在 vite.config.js 文件中使用 CDN 插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePluginCdn } from 'vite-plugin-cdn';
export default defineConfig({
? plugins: [
? ? vue(),
? ? VitePluginCdn({
? ? ? ? modules:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: 'vue',
? ? ? ? ? ? ? ? var: 'Vue',
? ? ? ? ? ? ? ? path: 'vue/dist/vue.min.js'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: 'vue-router',
? ? ? ? ? ? ? ? var: 'VueRouter',
? ? ? ? ? ? ? ? path: 'vue-router/dist/vue-router.min.js'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: 'chart.js',
? ? ? ? ? ? ? ? var: 'Chart',
? ? ? ? ? ? ? ? path: 'chart.js/dist/Chart.min.js'
? ? ? ? ? ? }
? ? ? ? ],
? ? ? ? prodUrl: 'https://cdn.example.com/{{module}}/{{version}}/{{path}}',
? ? ? ? // 以下配置可以是 CDN 來(lái)加速引入的資源。
? ? ? ? // 必須是數(shù)組形式，且選項(xiàng)都必須包含 `test` 和 `method` 屬性。
? ? ? ? // 具體可選項(xiàng)請(qǐng)參考 `preload-webpack-plugin` 的 `include` 參數(shù)。
? ? ? ? allowList: [
? ? ? ? ? ? {
? ? ? ? ? ? ? test: /bootstrap-vue/(.*?).(js|css|woff|woff2|ttf|svg|png|jpe?g|gif)$/,
? ? ? ? ? ? ? method: 'GET',
? ? ? ? ? ? ? //可選的擴(kuò)展加載,vue使用
? ? ? ? ? ? ? ext: 'js'
? ? ? ? ? ? }
? ? ? ? ]
? ? })
? ]
})

使用 vite-plugin-cdn 插件可以方便地自動(dòng)將指定的模塊從CDN加載。需要注意的是，這個(gè)插件需要按照指定規(guī)則的方式來(lái)定義模塊和版本。具體用法可以參考 vite-plugin-cdn 的官方文檔。

以上這些方法都可以實(shí)現(xiàn)CDN資源加速，根據(jù)實(shí)際使用場(chǎng)景可以靈活選擇。

在Webpack中，可以通過(guò)以下方式來(lái)使用CDN資源加速：

使用 HtmlWebpackPlugin 插件

在 webpack.config.js 文件中使用 HtmlWebpackPlugin 插件，在 template 配置中引入CDN地址

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
? // ...
? plugins: [
? ? new HtmlWebpackPlugin({
? ? ? template: 'public/index.html',
? ? ? cdn: {
? ? ? ? js: [
? ? ? ? ? 'https://cdn.example.com/jquery.min.js',
? ? ? ? ? 'https://cdn.example.com/bootstrap.min.js'
? ? ? ? ],
? ? ? ? css: [
? ? ? ? ? 'https://cdn.example.com/bootstrap.min.css'
? ? ? ? ]
? ? ? }
? ? })
? ],
? // ...
};

在 HTML 模板文件中，將 js 和 css 鏈接插入到模板中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
    <% for (var i in htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="stylesheet">
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <% for (var i in htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>

這種方式可以將靜態(tài)資源鏈接插入到運(yùn)行 HTML 模板源文件中，以指定CDN地址加載。

在 output.publicPath 中設(shè)置 CDN 地址

在 webpack.config.js 文件中設(shè)置 output.publicPath 屬性：

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/',
  },
  // ...
}

這樣設(shè)置后，通過(guò)Webpack打包后的靜態(tài)資源將從指定的CDN地址加載，比如JS、CSS、圖片等靜態(tài)資源。
以上這些方法都可以實(shí)現(xiàn)CDN資源加速，根據(jù)實(shí)際使用場(chǎng)景可以靈活選擇。

vite和webpack的區(qū)別

1.  開(kāi)發(fā)模式下的運(yùn)行方式不同

Vite在開(kāi)發(fā)模式下使用 Rollup 進(jìn)行打包，并提供了一個(gè)內(nèi)置的 HTTP 服務(wù)器來(lái)提供服務(wù)。它使用 ES modules 作為默認(rèn)的模塊系統(tǒng)，可以快速地進(jìn)行熱更新和快速構(gòu)建。

Webpack在開(kāi)發(fā)模式下使用自己的開(kāi)發(fā)服務(wù)器進(jìn)行工作，支持熱更新，但通常需要使用一些插件來(lái)實(shí)現(xiàn)一些高級(jí)功能，如HMR（熱模塊替換）。

以下是一個(gè)使用Vite的示例代碼，index.html 文件中直接引用模塊，瀏覽器通過(guò) Vite 內(nèi)置的 HTTP 服務(wù)器加載模塊：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

以下是一個(gè)使用Webpack的示例代碼，webpack-dev-server通過(guò)監(jiān)聽(tīng)文件變化來(lái)觸發(fā)熱更新：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
? mode: 'development',
? entry: './src/index.js',
? output: {
? ? path: path.resolve(__dirname, 'dist'),
? ? filename: 'main.js',
? },
? devServer: {
? ? contentBase: './dist',
? ? hot: true,
? },
? plugins: [
? ? new HtmlWebpackPlugin({
? ? ? title: 'My App',
? ? }),
? ],
};

2.  構(gòu)建方式和性能

Vite在開(kāi)發(fā)模式下使用Rollup進(jìn)行構(gòu)建，支持按需編譯和充分利用現(xiàn)代瀏覽器的原生ES模塊，所以它的速度更快，比如熱刷新延時(shí)更短、構(gòu)建速度更快等。但在實(shí)際項(xiàng)目中，如需要自定義構(gòu)建方式和高級(jí)功能的話，需要對(duì)Rollup的運(yùn)行機(jī)制有一定的了解。

Webpack基于模塊化思想和依賴分析，在生產(chǎn)模式下可以更好地實(shí)現(xiàn)代碼壓縮、分離、圖片壓縮等復(fù)雜的構(gòu)建操作。同時(shí)Webpack還內(nèi)置了一些優(yōu)化策略，如啟用多線程并發(fā)構(gòu)建、使用Tree shaking技術(shù)等，因此Webpack在處理大型項(xiàng)目時(shí)更具優(yōu)勢(shì)。

以下是一個(gè)使用Vite的示例代碼，build 命令會(huì)通過(guò) Rollup 進(jìn)行構(gòu)建：

// vite.config.js
export default {
? build: {
? ? outDir: 'dist',
? ? assetsDir: 'assets',
? ? rollupOptions: {
? ? ? input: 'src/main.js',
? ? },
? },
}

以下是一個(gè)使用Webpack的示例代碼，npm run build 命令會(huì)通過(guò) Webpack 進(jìn)行構(gòu)建：

// webpack.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
? mode: 'production',
? entry: './src/index.js',
? output: {
? ? filename: 'main.js',
? ? path: path.resolve(__dirname, 'dist'),
? },
? plugins: [
? ? new CleanWebpackPlugin(),
? ? new HtmlWebpackPlugin({
? ? ? title: 'My App',
? ? }),
? ],
};

3.  配置方式

Vite使用ES modules進(jìn)行導(dǎo)入和導(dǎo)出，而配置文件也是一個(gè)ES module，可以直接使用ES6語(yǔ)法，簡(jiǎn)易直觀。此外，Vite還提供了一個(gè)內(nèi)置的插件管理系統(tǒng)和一些現(xiàn)成的插件，方便用戶管理和使用。

Webpack使用CommonJS方式來(lái)導(dǎo)入和導(dǎo)出模塊，配置文件是一個(gè)CommonJS模塊，使用的是Node.js的API，需要一定的配置經(jīng)驗(yàn)，但也更加靈活，可以滿足

4.  支持的語(yǔ)言

Vite除了支持JavaScript和CSS，還支持以.vue文件為代表的單文件組件，這種組件可以將HTML、CSS和JavaScript打包到一個(gè)文件中。Vue.js等框架也積極支持Vite，稱其是其未來(lái)的構(gòu)建工具。

Webpack雖然可以支持JavaScript和CSS，但是它的打包方式更加靈活，支持Sass、Less等CSS預(yù)處理器，同時(shí)也可以使用Babel來(lái)支持ES6以上的JavaScript語(yǔ)法。

以下是一個(gè)使用Vite的示例代碼，.vue文件包含HTML、CSS和JavaScript等三種代碼：

<template>
? <div>
? ? <h1>{{ msg }}</h1>
? </div>
</template>

<script>
export default {
? name: 'HelloWorld',
? data() {
? ? return {
? ? ? msg: 'Welcome to Your Vue.js App - Vite',
? ? }
? },
}
</script>

<style>
h1 {
? color: #00f;
}
</style>

以下是一個(gè)使用Webpack的示例代碼，.scss文件包含CSS代碼和變量：

$primary-color: #00f;
body {
? background-color: lighten($primary-color, 50%);
? color: darken($primary-color, 30%);
}

5.  插件生態(tài)和拓展性

Webpack的插件生態(tài)很豐富，提供了很多社區(qū)開(kāi)發(fā)的插件，可以滿足各種需求，可以針對(duì)性的選擇安裝，非常方便。同時(shí)Webpack還支持自定義插件，可以非常靈活地拓展其功能。
Vite的插件生態(tài)相對(duì)較少，但其特有的打包方式和內(nèi)置的插件系統(tǒng)可以對(duì)項(xiàng)目開(kāi)發(fā)提供很好的支持。Vite的開(kāi)發(fā)團(tuán)隊(duì)也計(jì)劃在未來(lái)增加更多的插件，支持更多瀏覽器和應(yīng)用場(chǎng)景。

到此這篇關(guān)于淺談vite和webpack的性能優(yōu)化和區(qū)別的文章就介紹到這了,更多相關(guān)vite和webpack區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論