vue-cli 构建打包优化（JeecgBoot-Vue2 配置优化篇）

项目：jeecgboot-Vue2

在项目二次开发后，在本人电脑打包时间为3分35秒左右

webpack5默认优化：

1. Tree Shaking（摇树优化）：删除未使用的代码
2. base64 内联： 小于 8KB 的资源（图片等）进行 Base64 内联，减少 HTTP 请求，会增加33%的大小
3. …

原配置： vue.config.js

1. 生产环境取消 console，productionSourceMap
2. 生产环境js、css Gzip压缩
3. less转译
4. …

const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {productionSourceMap: false,publicPath:'/',configureWebpack: config => {// 生产环境取消 console.logif (process.env.NODE_ENV === 'production') {config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true}},chainWebpack: (config) => {config.resolve.alias.set('@$', resolve('src')).set('@api', resolve('src/api')).set('@assets', resolve('src/assets')).set('@comp', resolve('src/components')).set('@views', resolve('src/views'))// 生产环境，开启js\css压缩if (process.env.NODE_ENV === 'production') {config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|less)$/, // 匹配文件名threshold: 10240, // 对超过10k的数据压缩deleteOriginalAssets: false // 不删除源文件}))}// 配置 webpack 识别 markdown 为普通的文件config.module.rule('markdown').test(/\.md$/).use().loader('file-loader').end()// 编译vxe-table包里的es6代码，解决IE11兼容问题config.module.rule('vxe').test(/\.js$/).include.add(resolve('node_modules/vxe-table')).add(resolve('node_modules/vxe-table-plugin-antd')).end().use().loader('babel-loader').end()},css: {loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#1890FF','link-color': '#1890FF','border-radius-base': '4px',},javascriptEnabled: true,}}},devServer: {port: 3000,proxy: {'/jeecg-boot': {target: 'http://localhost:8080',ws: false,changeOrigin: true},}},lintOnSave: undefined
}

优化后： 首次打包2分30秒，二次打包25秒

1. CDN 外部依赖 (externals)，HTML 自动注入CDN
2. 持久化缓存 (cache)，极大加速二次构建，修改配置后失效
3. 移除 prefetch，避免预加载未使用的资源
4. Moment.js 语言包裁剪，只保留中文语言包
5. 图片压缩（image-webpack-loader）
6. CSS压缩（CssMinimizerPlugin）
7. JS压缩（terser）
8. 多线程构建 (thread-loader），适用于中大型项目

const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require("compression-webpack-plugin")
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')const assetsCDN = {externals: {'viser-vue': 'ViserVue'},js: ['//unpkg.com/viser-vue/umd/viser-vue.min.js'],css: []
}function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {publicPath: '/',assetsDir: 'static',outputDir: 'dist',lintOnSave: undefined,filenameHashing: true,  		// 文件名哈希productionSourceMap: false,   // 生产环境的 source mapconfigureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// terser 配置，压缩JavaScript config.optimization.minimizer = [new TerserPlugin({terserOptions: {compress: {drop_console: true // 移除 console}}}),// css压缩new CssMinimizerPlugin(),]// 配置外部依赖config.externals = assetsCDN.externals;}// 缓存配置config.cache = {type: 'filesystem',buildDependencies: {config: [__filename],           // vue.config.js 变更时失效// dependencies: ['package.json']  // 依赖变更时失效（存在兼容性问题）},// 指定缓存位置，默认位置：node_modules/.cache/webpackcacheDirectory: path.resolve(__dirname, '.webpack_cache')   }},chainWebpack: (config) => {// 添加多线程构建config.module.rule('js').use('thread-loader').loader('thread-loader').options({workers: require('os').cpus().length - 1, // CPU核心数减1}).end()// 移除 prefetch，避免加载多余的资源config.plugins.delete('prefetch')// 只保留中文语言包config.plugin('ContextReplacementPlugin').use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/])// 配置别名config.resolve.alias.set('@$', resolve('src')).set('@api', resolve('src/api')).set('@assets', resolve('src/assets')).set('@comp', resolve('src/components')).set('@views', resolve('src/views'))if (process.env.NODE_ENV === 'production') {// 添加 CDN 配置到 HTMLconfig.plugin('html').tap(args => {args[0].cdn = assetsCDNreturn args})// 开启js\css Gzip压缩config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|less)$/,   // 匹配文件名threshold: 10240,           // 对超过10k的数据压缩deleteOriginalAssets: false // 不删除源文件minRatio: 0.8,				// 压缩比小于0.8不予压缩}))// 图片压缩config.plugin('image-optimizer').use(ImageMinimizerPlugin, [{minimizer: {implementation: ImageMinimizerPlugin.squooshMinify,options: {encodeOptions: {mozjpeg: { quality: 80 },webp: { lossless: true },},},},}]);// 分包策略config.optimization.splitChunks({chunks: 'all',minSize: 20000,maxSize: 244000,maxAsyncRequests: 30,   // 按需加载时的最大并行请求数maxInitialRequests: 20, // 入口点上的最大并行请求数cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},common: {minChunks: 2,priority: -20,reuseExistingChunk: true}}})}// 配置 webpack 识别 markdown 为普通的文件config.module.rule('markdown').test(/\.md$/).use().loader('file-loader').end()// 编译vxe-table包里的es6代码，解决IE11兼容问题config.module.rule('vxe').test(/\.js$/).include.add(resolve('node_modules/vxe-table')).add(resolve('node_modules/vxe-table-plugin-antd')).end().use().loader('babel-loader').end()},css: {loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#1890FF','link-color': '#1890FF','border-radius-base': '4px'},javascriptEnabled: true}}},devServer: {port: 3000,client: {overlay: {runtimeErrors: false}},proxy: {target: 'http://localhost:8080',ws: false,changeOrigin: true}}}
}

继续优化： 首次打包1分50秒，二次打包25秒

1. ESBuild ：替代 terser + babel + thread-loader，ESBuild 本身启用多线程打包，用ESBuild加速JS转译，极大提升构建速度，需要考虑兼容性（现代浏览器）
2. Brotli 压缩：Gzip 压缩率高 15%~25%，但压缩速度稍慢。需要服务器支持和浏览器支持，前端构建时预生成 .br 和 .gz，可通过浏览器请求头判断支持，服务器动态响应

const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require("compression-webpack-plugin")
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const { EsbuildPlugin } = require('esbuild-loader')
const BrotliPlugin = require('brotli-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');// 注意版本
const assetsCDN = {externals: {'viser-vue': 'ViserVue','ant-design-vue': 'antd','vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex'},js: ['//unpkg.com/viser-vue/umd/viser-vue.min.js','//unpkg.com/ant-design-vue@3.2.6/dist/antd.min.js','//unpkg.com/vue@3.2.47/dist/vue.global.prod.js','//unpkg.com/vue-router@4.2.2/dist/vue-router.global.prod.js','//unpkg.com/vuex@4.1.0/dist/vuex.global.prod.js'],css: ['//unpkg.com/ant-design-vue@3.2.6/dist/antd.min.css']
}function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {publicPath: '/',assetsDir: 'static',outputDir: 'dist',lintOnSave: undefined,filenameHashing: true,  		// 文件名哈希productionSourceMap: false,   // 生产环境的 source mapconfigureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {config.optimization.minimizer = [new EsbuildPlugin ({target: 'es2015',  // 压缩为 ES6drop: ['console'], // 移除 consolecss: false}),new CssMinimizerPlugin()]// 配置外部依赖config.externals = assetsCDN.externals;}// 缓存配置config.cache = {type: 'filesystem',buildDependencies: {config: [__filename],           // vue.config.js 变更时失效// dependencies: ['package.json']  // 依赖变更时失效（存在兼容性问题）},// 指定缓存位置，默认位置：node_modules/.cache/webpackcacheDirectory: path.resolve(__dirname, '.webpack_cache')   }},chainWebpack: (config) => {// 移除 prefetch，避免加载多余的资源config.plugins.delete('prefetch')// 只保留中文语言包config.plugin('ContextReplacementPlugin').use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/])// 配置别名config.resolve.alias.set('@$', resolve('src')).set('@api', resolve('src/api')).set('@assets', resolve('src/assets')).set('@comp', resolve('src/components')).set('@views', resolve('src/views'))if (process.env.NODE_ENV === 'production') {// 添加 CDN 配置到 HTMLconfig.plugin('html').tap(args => {args[0].cdn = assetsCDNreturn args})// 开启 Gzip 和 Brotli 压缩config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|less|scss|html|svg)$/,threshold: 10240,minRatio: 0.8,deleteOriginalAssets: false}))config.plugin('brotliPlugin').use(new BrotliPlugin({test: /\.(js|css|less|scss|html|svg)$/,threshold: 10240,minRatio: 0.8,deleteOriginalAssets: false}))// 图片压缩config.plugin('image-optimizer').use(ImageMinimizerPlugin, [{minimizer: {implementation: ImageMinimizerPlugin.squooshMinify,options: {encodeOptions: {mozjpeg: { quality: 80 },webp: { lossless: true },},},},}]);// 分包策略config.optimization.splitChunks({chunks: 'all',minSize: 20000,maxSize: 244000,maxAsyncRequests: 30,   // 按需加载时的最大并行请求数maxInitialRequests: 20, // 入口点上的最大并行请求数cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},common: {minChunks: 2,priority: -20,reuseExistingChunk: true}}})}// 配置 webpack 识别 markdown 为普通的文件config.module.rule('markdown').test(/\.md$/).use().loader('file-loader').end()// ESBuild 转译 JS（替代 Babel）config.module.rule('js').test(/\.js$/).exclude.add(/node_modules/).end().use('esbuild-loader').loader('esbuild-loader').options({ loader: 'jsx', target: 'es2015' });},css: {loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#1890FF','link-color': '#1890FF','border-radius-base': '4px'},javascriptEnabled: true}}},devServer: {port: 3000,client: {overlay: {runtimeErrors: false}},proxy: {target: 'http://localhost:8080',ws: false,changeOrigin: true}}}
}