目基本情況

項目是一個vue2+webpack4的管理平臺，

接下來看一下項目的打包耗時情況和產物依賴情況

耗時情況

首先使用SpeedMeasurePlugin來看一下項目的構建過程中各個階段的耗時情況。

const SpeedMeasurePlugin=require("speed-measure-webpack-plugin");
const smp=new SpeedMeasurePlugin();

module.exports={
  configureWebpack: smp.wrap({
    // 在這里配置原本的Webpack配置
    // 可以定義entry、output、module等配置
  })
};

使用SpeedMeasurePlugin分析打包情況，項目總體耗時43s，其中有一些loader耗時過長，會幫我們標紅，尤其是vue-loader和sass-loader和postcss-loader耗時過長，后續可以考慮使用緩存，并行處理使用thread-loader來優化。 產出依賴 webpack-bundle-analyzer使用這個插件，可以幫助分析項目的構建結果，以識別過大的模塊、重復的依賴和不必要的代碼。一旦你生成了可視化分析界面，可以按照以下方式來進行分析：

1. 查看模塊大小：

• 通過可視化界面，可以看到每個模塊的大小。這可以幫助識別哪些模塊尺寸過大，從而考慮是否需要對其進行優化，例如拆分代碼、按需加載等。

1. 檢查重復的依賴：

• 可以查看依賴關系圖，識別是否有重復的依賴被打包進了多個bundle中。這可能意味著某些依賴被重復引入，可以考慮通過Webpack的代碼拆分功能或其他優化策略來避免重復打包。

1. 識別不必要的代碼：

• 通過分析模塊之間的依賴關系，可以發現是否有一些不必要的代碼被打包進了bundle中。這可能是因為某些模塊被錯誤引入，或者存在無用的代碼。通過分析依賴關系，可以識別并清理這些不必要的代碼。

1. 查看模塊間的依賴關系：

• 了解模塊之間的依賴關系可以幫助你優化代碼拆分策略，以減少不必要的依賴關系，提高構建性能。

首先安裝插件npm install --save-dev webpack-bundle-analyzer

 const BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports={
 configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
}

發現比較大的產物就是echarts、element-ui.common,js和wangeditor，這個后續可以考慮按需加載、使用CDN引入和壓縮。 開始優化 升級webpack 為啥把webpack升級放到第一個，個人喜好吧，覺得這個升級可能是性能提升最大的一個。 首先下載一個npm-check，查看當前npm依賴包的情況，有些可能會出現npm證書的情況，比如我的舊項目，做法也比較簡單，切換到最新的淘寶鏡像源，然后刪掉node_modules，重新安裝即可。 運行npx npm-check就可以了，或者也可以全局安裝。 npm-check是一個用于檢查項目中npm依賴包是否有更新版本的工具。通過運行npm-check命令，可以列出當前項目中已安裝的npm包，并顯示它們是否有可用的更新版本。這樣可以幫助開發者及時了解項目依賴包的更新情況，及時更新以確保項目的安全性和穩定性。 會出現這么幾種情況，根據具體的保存信息自行調整。 MAJOR UP 有一個或多個主要版本更新可用，建議及時更新以獲取最新功能和修復bug。 NOTUSED 表示該依賴包未被項目使用，可以考慮移除以減少項目的依賴項數量。 PKG ERR!表示在檢查依賴包時出現錯誤，可能是由于網絡問題或依賴包本身存在問題導致的。 MISSING!表示在項目中缺少某個依賴包，可能會影響項目的正常運行，需要及時安裝該依賴包。 接下來使用npm-check-updates 來檢查依賴庫可更新的版本 運行npx npm-check-updates即可 npm-check-updates是一個npm包，它可以幫助你檢查當前項目中的npm依賴包是否有可用的更新版本。通過運行npm-check-updates命令，你可以快速了解哪些依賴包可以更新到最新版本，以便及時更新你的項目依賴，保持項目的安全性和穩定性。這個工具可以幫助你輕松地管理npm依賴版本，提高項目的維護效率。npm check-updates包含以下常用命令：

1. npm-check-updates：檢查當前項目中哪些npm包可以更新到最新版本。
2. npm-check-updates -u：將package.json文件中的依賴版本號更新為最新版本。
3. npm-check-updates -a：顯示所有可用的更新，包括主要版本更新。
4. npm-check-updates -g：檢查全局安裝的npm包是否有可用更新。
5. npm-check-updates -f <filter>：根據提供的過濾器篩選要檢查的依賴包。
6. npm-check-updates -x <exclude>：排除特定的依賴包不進行檢查。

npm-check-updates -p <packageManager>：指定要使用的包管理器，如npm或yarn。 運行npx npm-check-updates -u在package.json中的依賴便被更新了 因為這里只關注webpack及相關依賴，不涉及vue，于是將vue-router,vuex,vue-template-compiler還原。 運行npm i再重新安裝這些依賴即可。 安裝完畢后，運行vue inspect > webpack-config.js重新查看配置情況 報錯 Error: Cannot find module 'webpack/lib/RequestShortener' 于是手動更新webpack,npm install webpack@latest --save-dev 再運行vue inspect > webpack-config.js ERROR Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use() first. Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use() first. 這個錯誤通常是由于Webpack插件的使用順序問題導致的。具體來說，Webpack要求在調用.tap()方法之前，必須先調用.use()方法來定義插件。 需要更改下插件的調用方式 比如原先的：

config.plugin("preload").tap(()=> [
      {
        rel: "preload",
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/.map$/, /hot-update.js$/, /runtime..*.js$/],
        include: "initial",
      },
    ]);

改成：

const PreloadWebpackPlugin=require('preload-webpack-plugin');
config.plugin('preload').use(PreloadWebpackPlugin, [
      {
        rel: 'preload',
        fileBlacklist: [/.map$/, /hot-update.js$/, /runtime..*.js$/],
        include: 'initial',
      },
    ]);

接著依次更改下所使用的插件 隨后運行vue inspect > webpack-config.js 報錯： Error: Cannot find module 'preload-webpack-plugin' 查找了些資料發現： 在Webpack 5中，一些插件或工具可能需要額外安裝，這可能是因為Webpack 5對插件系統或依賴項有所改變，導致某些插件不再默認包含在Webpack中。這可能是為了減少Webpack的體積，提高靈活性，或者是對插件生態系統的調整。 于是安裝npm install preload-webpack-plugin 再次運行vue inspect > webpack-config.js 可以看到根目錄下出現了一個webpack.config.js配置文件。 開始運行項目npm run serve 問題1： 發現報錯 ERROR TypeError: compiler.plugin is not a function TypeError: compiler.plugin is not a function 發現 preload-webpack-plugin和webpack5不兼容， 暫時先干掉 問題2 發現報錯 options has an unknown property 'overlay'. These properties are valid:webpack 在將webpack4升級到webpack5時，webpack-dev-server的配置項發生了一些變化。對于overlay屬性，webpack5中已經不再支持這個屬性，而是使用了新的方式來處理警告和錯誤?？梢詫verlay屬性替換為client屬性，并設置overlay為true來實現類似的功能。 原來的

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    ...

現在的

devServer: {
    port: port,
    open: true,
    client: {
      overlay: {
        warnings: false,
        errors: true
      }
    },

問題3： 繼續報錯 [@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead. >>>和/deep/這兩個組合選擇器已經被棄用，取而代之的是使用:deep()偽類選擇器來實現相同的功能。 這個需要更改原先的業務代碼，而且改動較大，暫時擱置 問題4： 代碼有很多不規范的寫法導致編譯報錯 VueCompilerError: <template v-for> key should be placed on the <template> tag Vue編譯器錯誤，提示你在使用<template v-for>時應該將key屬性放在<template>標簽上而不是放在內部元素上。 將不規范的地方改過來即可。 問題4： 項目啟動之后，獲取不到process.env.VUE_APP_BASE_API，經過各種搜索發現 因為Webpack在構建過程中會將.env文件中的變量注入到process.env中，但這些變量在Vue組件中不會直接可見。 為了在Vue組件中訪問.env文件中的變量，可以使用webpack.DefinePlugin插件將這些變量注入到Vue應用的全局變量中。你可以在vue.config.js中進行如下配置

chainWebpack: config=> {
    config.plugin('define').use(require('webpack').DefinePlugin, [
      {
        'process.env': {
          VUE_APP_BASE_API: JSON.stringify(process.env.VUE_APP_BASE_API)
        }
      }
    ]);
  }

問題5：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

Webpack 5不再默認包含Node.js核心模塊的polyfill，需要手動配置polyfill來解決這個問題。

手動安裝npm install path-browserify --save

添加配置

resolve: {
      alias: {
        ...
      },
      fallback: {
        "path": require.resolve("path-browserify")
      }
    },

問題6：

ERROR in ./node_modules/vue-i18n/dist/vue-i18n.mjs 452:27-35
export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)
 @ ./src/main.js 36:0-31

這個是版本不兼容導致的，在package.json中對vue-i18n進行還原，然后重新安裝 至此我們的項目已經可以跑起來了。 運行打包命令，發現時間比我們沒升級前要長，可能是

1. 缺少緩存：Webpack 5 默認啟用了持久化緩存（persistent caching），但是在升級過程中可能沒有正確配置緩存導致重新構建所有模塊，從而增加了打包時間。
2. 模塊解析速度變慢：Webpack 5 在模塊解析方面進行了一些改進，但這也可能導致解析速度變慢。

當我們設置緩存和打包環境：

configureWebpack: {
    cache: {
      type: 'filesystem',
    },
    mode: 'production',
},

打包時間一下子縮減到20s，優化幅度很大了。后續再從其他方面進一步優化。

緩存

這里主要給babel添加loader緩存

{
  loader: 'cache-loader', // 使用緩存
  options: {
    cacheDirectory: path.resolve(__dirname, '.cache/babel-loader'), // 緩存目錄
  },
},
{
  loader: 'babel-loader',
  options: {
    cacheDirectory: true, // 同樣啟用Babel自身的緩存
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-proposal-class-properties'],
  },
},

再添加個vue-loader緩存

configureWebpack: config=> {
    config.module
      .rule('vue')
      .test(/.vue$/)
      .use('cache-loader')
      .before('vue-loader')
      .loader('cache-loader')
      .options({
        cacheDirectory: path.resolve(__dirname, '.cache/vue-loader'), // 設置緩存目錄
      });
  },

General output time took 14.6 secs，時間降低到14.6，很快了。

壓縮

在webpack5中，當mode設置為production時，默認會壓縮代碼的，這里實際上不需要額外的設置。然而涉及到圖片，還是需要處理下的

{
          test: /.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192, // 小于8KB的圖片將被轉換為base64編碼
              },
            },
            {
              loader: 'image-webpack-loader',
              options: {
                mozjpeg: {
                  progressive: true,
                  quality: 65,
                },
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.65, 0.9],
                  speed: 4,
                },
                gifsicle: {
                  interlaced: false,
                },
              },
            },
          ],
        },
        {
          test: /.svg$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192, // 小于8KB的SVG將被轉換為base64編碼
              },
            },
            {
              loader: 'svgo-loader',
              options: {
                plugins: [
                  { removeViewBox: false },
                  { removeDimensions: true },
                ],
              },
            },
          ],
        },

General output time took 13.47 secs

并行構建

config.module
      .rule('js')
      .use('thread-loader')
      .loader('thread-loader')
      .options({
        workers: 4 // 指定worker
      })
      .end();

理想的worker數量通常不應超過你的CPU核心數。如果你有一個4核CPU，通常設置2到4個worker是合理的。設置過多的worker可能會導致上下文切換開銷，反而降低效率。最好的辦法就是多嘗試：比如我的電腦就是8核的，不定的設置workers數，8、6、4、2，發現4效果最好，那就是他了。 General output time took 13.15 secs 最后打包時間為13s左右，發現其實效果沒有之前那么顯著了， 代碼分隔

config.optimization.splitChunks({
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    });

webpack會根據這些規則將公共的依賴模塊提取到單獨的文件中，避免重復加載。 General output time took 13.57 secs 打包優化時間也是沒什么變化。 至于cdn引入，按需加載第三方那個庫，這就涉及到業務代碼的改動，投入產出不成正比，就不動它了。還有在.gitignore文件中添加*.cache，因為新建了緩存目錄，導致會多出很多文件，這個沒必要添加到git上去的。 至此構建優化就到此為止了，打包時間從43s優化至13.57s，算是很大的優化了，熱更新的時間也是1s左右的。 也想過換成vite試試，查過資料后換vite更是麻煩，一般的流程就是新建一個vite項目，然后將業務代碼遷移過去，怕出錯，就不試了。

Windows聚焦（Windows spotlight）是Win10中自帶的鎖屏壁紙功能，你可以在設置——個性化——鎖屏界面中進行設置。選中“Windows聚焦”后每次用戶登錄時都可能呈現不同的鎖屏背景，特別是在大屏電腦中，效果棒棒噠。

為幫助大家收集這些精美壁紙，軟媒魔方（點此下載最新版魔方）從6.16正式版開始，在美化大師中加入了Windows10聚焦壁紙一鍵提取功能，可自動掃描出所有本機下載過的“Windows 聚焦”壁紙，還沒用過的朋友趕快試一下吧！

本文為大家帶來Windows10聚焦鎖屏壁紙的第六波打包下載，共25張，每張壁紙都包含1920x1080（電腦版）以及1080x1920（平板、手機版）兩種分辨率。本次合集部分預覽圖如下：

微軟官方第六波Win10鎖屏壁紙無水印版打包在此：

提示：壁紙采用zip壓縮格式進行打包，您可以使用魔方中的軟媒壓縮工具來解壓。

所有Win10聚焦鎖屏壁紙下載：

特別提示：

使用魔方（點此進入官網下載）中的魔方美化大師，一鍵就可以把喜歡的壁紙/圖片/照片設置成電腦開機登陸畫面，也可以一鍵設置成右鍵菜單的背景！完美支持32位和64位的Win7、Vista、XP、Win2003、Win2008等系統。

特別告知Win8用戶，Win8系統下用美化大師，還可以隨意修改開始屏幕背景（魔方美化大師 - 開始屏幕設置）。

魔方電腦大師是Win7優化大師和Vista優化大師的新一代全新升級換代版本，微軟官方認證軟件，功能無比強大，被國內前3大下載網站評測為國內外最好的優化設置軟件。

上圖：進入魔方美化大師的開機畫面設置，把壁紙圖片直接拖進來就可以全自動設置

上圖：Win8系統下用美化大師，可以隨意修改開始屏幕背景了（魔方美化大師 - 開始屏幕設置）！

微信搜索“IT之家”關注搶6s大禮！下載IT之家客戶端（戳這里）也可參與評論抽樓層大獎！