前端打包优化相关 Webpack

前端打包优化相关 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 打包时间和体积，提升项目性能。