????????首先說(shuō)明一下，我優(yōu)化的項(xiàng)目是基于vue3 + ts的一個(gè)項(xiàng)目，使用的是webpack5的版本，不一定非要是webpack5經(jīng)測(cè)試4也可以正常使用

????????若想查看自己當(dāng)前項(xiàng)目的webpack版本，可以找node_modules目錄下面的webpack/package.json文件，查看文件中的version，如下圖

下面開(kāi)始進(jìn)入正題

一、關(guān)閉productionSourceMap

?????????productionSourceMap的作用在于定位問(wèn)題，打包時(shí)會(huì)生成.map文件，在生產(chǎn)環(huán)境就可以在瀏覽器查看到輸出的信息具體是在哪一行，但相應(yīng)的包的體積也會(huì)變大，將其設(shè)置為false則不生成.map文件

module.exports = defineConfig({
  productionSourceMap: false,
})

二、開(kāi)啟gzip

? ? ? ? gzip并不能很好的減小dist包的體積，個(gè)人覺(jué)的主要作用是在你build后，會(huì)生成兩份代碼，一份壓縮的，一份未壓縮的，在請(qǐng)求時(shí)服務(wù)器會(huì)優(yōu)先選擇壓縮的版本進(jìn)行返回

// 判斷是否是生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== "development";
module.exports = {
  configureWebpack: config => {
    // 若是生產(chǎn)環(huán)境，則執(zhí)行以下代碼
    if (isProduction) {
      //gzip壓縮
      const productionGzipExtensions = ["html", "js", "css"];
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path][base].gz", // 有的版本是[path].gz[query] 根據(jù)情況而定
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240, // 只有大小大于該值的資源會(huì)被處理 10240
          minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理
          deleteOriginalAssets: false, // 刪除原文件
        })
      );
    }
  }
}

上面配置完后，還需配置下nginx

? ? ? ? 在ngxin.conf文件，在http模塊填入以下內(nèi)容

 # 開(kāi)啟gzip
    gzip on;

    # 啟用gzip壓縮的最小文件，小于設(shè)置值的文件將不會(huì)壓縮
    gzip_min_length 1k;

    # gzip 壓縮級(jí)別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時(shí)間，后面會(huì)有詳細(xì)說(shuō)明
    gzip_comp_level 2;

    # 進(jìn)行壓縮的文件類(lèi)型。javascript有多種形式，后面的圖片壓縮不需要的可以自行刪除
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    # 是否在http header中添加Vary: Accept-Encoding，建議開(kāi)啟
    gzip_vary on;

    # 設(shè)置壓縮所需要的緩沖區(qū)大小     
    gzip_buffers 4 16k;

然后就可以啟動(dòng)nginx查看效果了，因?yàn)槲疫@是測(cè)試項(xiàng)目，沒(méi)有多少東西，所以結(jié)果時(shí)間相差不大，大家可以自行測(cè)試

????????????????????????????????????????????????????????????????未壓縮的

????????????????????????????????????????????????????????????????壓縮后的

?三、開(kāi)啟CDN

? ? ? ? CDN主要是將一些可以在CDN服務(wù)器上引用到的插件不進(jìn)行打包，直接通過(guò)CDN鏈接，從而減小包的體積

? ? ? ? 1、首先配置好各個(gè)鏈接地址

? ? ? ? 若不知道地址是什么的可通過(guò)BootCDN - Bootstrap 中文網(wǎng)開(kāi)源項(xiàng)目免費(fèi) CDN 加速服務(wù)進(jìn)行查詢(xún)，下面是關(guān)于cdn鏈接地址后綴的介紹

Vue的各種版本介紹：

1. cjs（兩個(gè)版本都是完整版，包含編譯器）

????????vue.cjs.js

????????vue.cjs.prod.js（開(kāi)發(fā)版，代碼進(jìn)行了壓縮）

2. global（這四個(gè)版本都可以在瀏覽器中直接通過(guò)scripts標(biāo)簽導(dǎo)入，導(dǎo)入之后會(huì)增加一個(gè)全局的Vue對(duì)象）

????????vue.global.js（完整版，包含編譯器和運(yùn)行時(shí)）

????????vue.global.prod.js（完整版，包含編譯器和運(yùn)行時(shí)，這是開(kāi)發(fā)版本，代碼進(jìn)行了壓縮） ????????vue.runtime.global.js

????????vue.runtime.global.prod.js

3. browser（四個(gè)版本都包含esm，瀏覽器的原生模塊化方式，可以直接通過(guò)<script type="module" />的方式來(lái)導(dǎo)入模塊）

????????vue.esm-browser.js

????????vue.esm-browser.prod.js

????????vue.runtime.esm-browser.js

????????vue.runtime.esm-browser.prod.js

4. bundler（這兩個(gè)版本沒(méi)有打包所有的代碼，只會(huì)打包使用的代碼，需要配合打包工具來(lái)使用，會(huì)讓Vue體積更?。?/p>

????????vue.esm-bundler.js

????????bue.runtime.esm-bundler.js

? ? ? ? 2、找到需要的cdn鏈接后，進(jìn)行如下配置

// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false

const cdn = {
  // cdn：模塊名稱(chēng)和模塊作用域命名（對(duì)應(yīng)window里面掛載的變量名稱(chēng)）
  externals: {
      vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      'element-plus': 'ElementPlus',
      'axios': 'axios',
      'echarts': 'echarts'
  },
  // cdn的css鏈接
  css: [
    'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/theme-chalk/index.min.css'
  ],
  // cdn的js鏈接
  js: [
      'https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.min.js',
      'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.min.js',
      'https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.3/vue-router.global.min.js',
      'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/index.full.min.js',
      'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/locale/zh-cn.min.js',
      'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js',
      'https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.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
    })
    },
    configureWebpack: config => {
        // 用cdn方式引入，則構(gòu)建時(shí)要忽略相關(guān)資源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }
}

然后配置你的靜態(tài)資源文件，目錄：public/index.html中，配置如下

<!DOCTYPE html>
<html lang="">
  <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="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
     <!-- 使用CDN的CSS文件 -->
     <% for (var i in htmlWebpackPlugin.options.cdn &&
     htmlWebpackPlugin.options.cdn.css) { %>
     <link
             href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
             rel="stylesheet"
     />
     <% } %>
  </head>
  <body>
    <div id="app"></div>
    
    <!-- built files will be auto injected -->
  </body>
</html>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

四、代碼壓縮

使用uglifyjs-webpack-plugin插件進(jìn)行對(duì)js的代碼壓縮優(yōu)化

安裝插件? npm i -D uglifyjs-webpack-plugin

然后配置如下內(nèi)容

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = defineConfig({
  configureWebpack: config => { 
    // 代碼壓縮
    config.plugins.push(
      new UglifyJsPlugin({
          uglifyOptions: {
            //生產(chǎn)環(huán)境自動(dòng)刪除console
            compress: {
                drop_debugger: true,
                drop_console: true,
                pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          parallel: true
      })
    )
  }
})

五、圖片壓縮

使用image-webpack-loader插件將圖片進(jìn)行壓縮

此插件會(huì)將你的圖片壓縮到一定大小，而一些小圖片會(huì)被直接壓縮成base64格式

安裝插件 npm install?image-webpack-loader?--save-dev

? 我看到有些人也會(huì)使用url-loader來(lái)壓縮圖片，url-loader只適用于比較小的圖片資源，如果圖片很大會(huì)導(dǎo)致構(gòu)建出的.js文件加載緩慢。

? 一般會(huì)配置小圖片使用url-loader完成，而大圖片則使用image-webpack-loader進(jìn)行壓縮，不過(guò)我測(cè)試了一下，發(fā)現(xiàn)直接使用image-webpack-loader也可以直接將小圖片壓縮為base64，所以我這里就直接配置了image-webpack-loader，沒(méi)有去進(jìn)行拆分

配置如下信息

module.exports = defineConfig({
  chainWebpack: config => { 
    // ============壓縮圖片 start============
    config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    .end()
  }
})

目前了解的優(yōu)化手段大概是這些，如果還有其他方式，還希望老板們也可以分享一下，大家相互學(xué)習(xí)！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-790073.html

到了這里，關(guān)于vue 性能優(yōu)化方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！