前端打包優化相關 Webpack

打包時間的優化（基于 Vue CLI 4 + Webpack 5）

1. Webpack 配置減少打包時間

1.1 對 JS 配置：排除 node_modules 和 src 中的打包內容

在開發環境下，修改 Webpack 的 JS 規則，排除 /node_modules 和 src 目錄中的 JavaScript 文件。這意味著 node_modules 和 src 目錄中的 JavaScript 文件不會經過該規則定義的加載器處理（如 Babel 轉譯、ESLint 檢查等）。

chainWebpack: (config) => {//  //編譯時將項目的版本號作為一個全局常量ProjectVersion注入到代碼中config.plugin('define').tap((args) => {args[0].ProjectVersion = JSON.stringify(ProjectVersion);return args;});// 判斷當前環境是否為開發環境if (process.env.NODE_ENV === 'development') {// 配置模塊規則config.module.rule('js').exclude.add(resolve('/node_modules')).add(resolve('src'));}
};

1.2 創建 DLL 配置文件，對第三方插件提前打包到本地

1.2.1 配置打包 DLL 文件

const path = require('path');
const webpack = require('webpack');module.exports = {mode: 'production', // 設置為生產模式entry: {// 將第三方庫分組打包vue: ['vue', 'vue-router', 'vuex'],elementUI: ['element-ui'],axios: ['axios'],lodash: ['lodash'],},output: {path: path.resolve(__dirname, 'dll'), // 輸出目錄filename: '[name].dll.js', // 輸出文件名library: '[name]_library', // 全局變量名},plugins: [// 生成 manifest 文件new webpack.DllPlugin({name: '[name]_library', // 需要與 output.library 一致path: path.resolve(__dirname, 'dll/[name]-manifest.json'), // manifest 文件路徑}),],
};

執行命令生成 DLL 文件：

npx webpack --config webpack.dll.config.js

1.2.2 配置打包文件使用 DLL 文件并插入到模板中

configureWebpack: (config) => {config.plugins.push(// 引入分片的 DLL 文件new webpack.DllReferencePlugin({manifest: require(path.resolve(__dirname, 'public/dll/vue-manifest.json')),}),new webpack.DllReferencePlugin({manifest: require(path.resolve(__dirname, 'public/dll/axios-manifest.json')),}),new webpack.DllReferencePlugin({manifest: require(path.resolve(__dirname, 'public/dll/elementGui-manifest.json')),}),new webpack.DllReferencePlugin({manifest: require(path.resolve(__dirname, 'public/dll/vueBaiduMap-manifest.json')),}),new webpack.DllReferencePlugin({manifest: require(path.resolve(__dirname, 'public/dll/glodonTinymce-manifest.json')),}),new webpack.DllReferencePlugin({manifest: require(path.resolve(__dirname, 'public/dll/elementChinaAreaData-manifest.json')),}),new webpack.DllReferencePlugin({manifest: require(path.resolve(__dirname, 'public/dll/mintUi-manifest.json')),}),// 將分片的 DLL 文件添加到 HTML 模板中new AddAssetHtmlPlugin([{filepath: path.resolve(__dirname, 'public/dll/vue.dll.js'),publicPath: process.env.VUE_APP_PUBLIC_PATH, // 根據項目路徑調整},{filepath: path.resolve(__dirname, 'public/dll/axios.dll.js'),publicPath: process.env.VUE_APP_PUBLIC_PATH,},{filepath: path.resolve(__dirname, 'public/dll/vueBaiduMap.dll.js'),publicPath: process.env.VUE_APP_PUBLIC_PATH,},{filepath: path.resolve(__dirname, 'public/dll/elementGui.dll.js'),publicPath: process.env.VUE_APP_PUBLIC_PATH,},{filepath: path.resolve(__dirname, 'public/dll/glodonTinymce.dll.js'),publicPath: process.env.VUE_APP_PUBLIC_PATH,},{filepath: path.resolve(__dirname, 'public/dll/elementChinaAreaData.dll.js'),publicPath: process.env.VUE_APP_PUBLIC_PATH,},{filepath: path.resolve(__dirname, 'public/dll/mintUi.dll.js'),publicPath: process.env.VUE_APP_PUBLIC_PATH,},]));
},

1.3 開啟多線程打包

使用 thread-loader 可能會達不到效果，因為開啟多線程也需要時間。

// 開啟多線程打包
config.module.rule('vue').use('thread-loader').loader('thread-loader').tap(() => {return {workers: os.cpus().length,};}).before('vue-loader');

1.4 刪除無用的插件配置，去掉 sourceMap

chainWebpack: (config) => {// 刪除一些無用插件config.plugins.delete('friendly-errors');config.devtool = false; // eval|none source-map hidden-source-map  // 不生成 sourceMap 源代碼，減少體積，加快打包速度
};

1.5 刪除 console.log（生產環境），配置壓縮 JS 和 CSS

// vue.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {configureWebpack: {optimization: {minimize: true, // 啟用壓縮minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true, // 刪除 console.logpure_funcs: ['console.log'], // 只刪除 console.log},format: {comments: false, // 刪除注釋},},extractComments: false, // 不提取注釋到單獨文件}),new CssMinimizerPlugin({minimizerOptions: {preset: ['default',{discardComments: { removeAll: true }, // 刪除所有注釋},],},}),],},},
};

---

2. 如何減少 Webpack 打包體積

2.1 按需加載

按需加載可以減少初始加載的代碼量，提升頁面加載速度。

2.2 Scope Hoisting

Scope Hoisting 會分析出模塊之間的依賴關系，盡可能將打包出來的模塊合并到一個函數中，減少函數聲明和閉包的開銷。

2.3 Tree Shaking

Tree Shaking 會去除沒有引用的代碼，減少打包體積。

---

通過以上優化措施，可以有效減少 Webpack 打包時間和體積，提升項目性能。