构建做了什么代码转换例如将 ts 转换为 js 、jsx转换为js等。浏览器兼容例如将es6降级到es5、css添加浏览器前缀、添加补丁等。代码压缩js压缩、css压缩、gzip 压缩等。代码拆分将大体积文件进行分割达到页面快速加载响应的效果等。热更新开发过程中修改代码后自动刷新页面而不用手动去刷新。tree-shaking打包过程中自动剔除没有使用的代码。构建工具Webpack完整的web应用构建工具提供各种资源处理、开发服务器和生产版本构建适合打包Vue2项目webpack5node10.13.0Vite新型前端构建工具基于Esbuild和Rollup的双引擎架构适合打包Vue3项目node16Esbuild追求快node12Rollup追求小更适合纯js类库或组件的打包Parcel适用小型项目Turbopack使用于服务端Rspack目前生态还不全编译工具Babel● 优点功能最全覆盖场景最广最成熟支持输出es5、es6代码支持动态polyfill● 缺点转换速度相对较慢SWC用来取代babel的js代码转换工具● 优点相对babel快20-70倍另外支持文件打包支持输出es5、es6代码支持动态polyfill● 缺点配套周边相对没有babel成熟● node10Esbuild● 优点相对babel快10-100倍另外支持文件打包不支持输出es5、支持输出es6代码不支持动态polyfill● 缺点配套周边相对没有babel成熟TSC● 优点相对babel有ts类型检查速度慢于babel支持输出es5、es6代码不支持动态polyfill● 缺点速度慢不支持取消类型检转换速度esbuildswcbabeltsc功能齐全babeltscswcesbuild压缩方案teser基于Nodejs由uglifyfork出来的新一代压缩工具● 优点功能齐全支持tree-shaking压缩比率最高● 缺点速度相对较慢SWC基于Rust支持js代码压缩● 优点速度快● 缺点压缩比率相对terser低Esbuild基于Go,支持js代码压缩● 优点速度快● 缺点压缩比率相对terser低压缩时如果target设置成es5js代码内不能出现es6代码不然会报错压缩率terseresbuildswc压缩时间esbuildswctersercsspostCss插件cssnano 优化和压缩CSS文件PurgeCSS去掉未使用css包管理器npm是node团队维护 npm3 还是 yarn 都采用扁平化的 node_modules 文件夹方式以此避免引入层级过深、相同依赖版本重复等问题 出现幽灵依赖如果后期项目包更新后项目可能会受到影响pnpm社区维护不会出现幽灵依赖硬连接的方式实现下载依赖会比npm快可以减少磁盘占用空间约束包管理器在package.json里新增scripts脚本preinstall: npx only-allow pnpmwebpack打包分析构建性能使用webpack-bundle-analyzer来分析你的包大小找出可能的优化点。if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) }2. 使用speed-measure-webpack-plugin来测量各个插件和 loader 的性能。const SpeedMeasurePlugin require(speed-measure-webpack-plugin); const smp new SpeedMeasurePlugin(); module.exports smp.wrap(webpackConfig)3. 使用 webpackbar 打包时可以看打包进度。使用更快的压缩工具用于压缩和优化 JavaScript 代码 可以考虑使用 terser-webpack-plugin 替代 uglifyjs-webpack-plugin因为 Terser 通常更快且支持更现代的 JavaScript 语法。 webpack4.26.0版本之前压缩插件是uglifyjs-webpack-plugin从webpack4.26.0版本开始换成了terser-webpack-pluginnpm install terser-webpack-plugin4.2.3 --save-dev const TerserPlugin require(terser-webpack-plugin); const webpackConfig merge(baseWebpackConfig, { mode: production, optimization: { minimize: true, minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true, // 移除 console 语句 // drop_debugger: true, // 移除 debugger 语句 }, // format: { // comments: false, // 移除所有注释 // }, }, // sourceMap: false, // 生成 Source Map cache: true, // 启用缓存 parallel: false, // 启用并行压缩 extractComments: false, // 禁止提取注释到单独的文件 })], })2. OptimizeCSSAssetsPlugin用于优化和压缩 CSS 资源spa例子现状webpack4babeluglifyjsnode10.15.3vue2.6.11打包时间不生成map6min、生成map20min4核cpu会顶满导致无法和其他项目并行构建目标单核、cpu不超60%、4分钟方案webpack4esbuild编译terser压缩webpack4esbuild编译esbuild压缩webpack5esbuild编译terser压缩webpack5esbuild编译esbuild压缩vite对vue2.6不是完全兼容需要安装插件vite-plugin-vue2支持vite更适用于Vue3项目实现项目把cpu顶满的问题webpack4.26.0卸载uglifyjs-webpack-plugin插件 安装terser-webpack-plugin4.2.3进行js代码压缩并设置parallel为false关闭并行。// build/webpack.prod.conf.js const TerserPlugin require(terser-webpack-plugin); const webpackConfig merge(baseWebpackConfig, { mode: production, optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, chunks: initial, name: vendors, }, async-vendors: { test: /[\\/]node_modules[\\/]/, minChunks: 2, chunks: async, name: async-vendors } } }, runtimeChunk: { name: runtime } runtimeChunk: { name: runtime }, minimize: true, minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true, // 移除 console 语句 // drop_debugger: true, // 移除 debugger 语句 }, // format: { // comments: false, // 移除所有注释 // }, }, cache: true, // 启用缓存 // sourceMap: false, // 生成 Source Map parallel: false, // 启用并行压缩 extractComments: false, // 禁止提取注释到单独的文件 })], },2. 项目构建时间过长babel-loader换成esbuild-loadernode12spa项目node为10.15.3先把node升级到16.18.0运行npm installnpm run devnpm run build确认项目没有问题先检查.babelrc文件如果配置为如下{ presets: [ [env, { modules: false, targets: { browsers: [ 1%, last 2 versions, not ie 8] } }], stage-2 ], plugins: [ transform-vue-jsx, transform-runtime, ] }换成esbuild-loader后需要卸载插件babel-preset-envbabel-plugin-transform-vue-jsxbabel-plugin-transform-runtime卸载无用的babel插件。卸载babel-loader插件 安装esbuild0.21.5 esbuild-loader4.2.2cache-loader4.1.0进行js代码压缩// build/webpack.base.conf.js module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: vue-loader, options: vueLoaderConfig }, { test: /\.js$/, include: [resolve(src)], exclude: /node_modules/, use: [ cache-loader, // 使用 cache-loader 进行缓存 { loader: esbuild-loader, options: { loader: jsx, // 指定加载器类型 target: es2015, // 指定目标环境 } } ] }, ... ] },
前端构建工具Webpack优化
构建做了什么代码转换例如将 ts 转换为 js 、jsx转换为js等。浏览器兼容例如将es6降级到es5、css添加浏览器前缀、添加补丁等。代码压缩js压缩、css压缩、gzip 压缩等。代码拆分将大体积文件进行分割达到页面快速加载响应的效果等。热更新开发过程中修改代码后自动刷新页面而不用手动去刷新。tree-shaking打包过程中自动剔除没有使用的代码。构建工具Webpack完整的web应用构建工具提供各种资源处理、开发服务器和生产版本构建适合打包Vue2项目webpack5node10.13.0Vite新型前端构建工具基于Esbuild和Rollup的双引擎架构适合打包Vue3项目node16Esbuild追求快node12Rollup追求小更适合纯js类库或组件的打包Parcel适用小型项目Turbopack使用于服务端Rspack目前生态还不全编译工具Babel● 优点功能最全覆盖场景最广最成熟支持输出es5、es6代码支持动态polyfill● 缺点转换速度相对较慢SWC用来取代babel的js代码转换工具● 优点相对babel快20-70倍另外支持文件打包支持输出es5、es6代码支持动态polyfill● 缺点配套周边相对没有babel成熟● node10Esbuild● 优点相对babel快10-100倍另外支持文件打包不支持输出es5、支持输出es6代码不支持动态polyfill● 缺点配套周边相对没有babel成熟TSC● 优点相对babel有ts类型检查速度慢于babel支持输出es5、es6代码不支持动态polyfill● 缺点速度慢不支持取消类型检转换速度esbuildswcbabeltsc功能齐全babeltscswcesbuild压缩方案teser基于Nodejs由uglifyfork出来的新一代压缩工具● 优点功能齐全支持tree-shaking压缩比率最高● 缺点速度相对较慢SWC基于Rust支持js代码压缩● 优点速度快● 缺点压缩比率相对terser低Esbuild基于Go,支持js代码压缩● 优点速度快● 缺点压缩比率相对terser低压缩时如果target设置成es5js代码内不能出现es6代码不然会报错压缩率terseresbuildswc压缩时间esbuildswctersercsspostCss插件cssnano 优化和压缩CSS文件PurgeCSS去掉未使用css包管理器npm是node团队维护 npm3 还是 yarn 都采用扁平化的 node_modules 文件夹方式以此避免引入层级过深、相同依赖版本重复等问题 出现幽灵依赖如果后期项目包更新后项目可能会受到影响pnpm社区维护不会出现幽灵依赖硬连接的方式实现下载依赖会比npm快可以减少磁盘占用空间约束包管理器在package.json里新增scripts脚本preinstall: npx only-allow pnpmwebpack打包分析构建性能使用webpack-bundle-analyzer来分析你的包大小找出可能的优化点。if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) }2. 使用speed-measure-webpack-plugin来测量各个插件和 loader 的性能。const SpeedMeasurePlugin require(speed-measure-webpack-plugin); const smp new SpeedMeasurePlugin(); module.exports smp.wrap(webpackConfig)3. 使用 webpackbar 打包时可以看打包进度。使用更快的压缩工具用于压缩和优化 JavaScript 代码 可以考虑使用 terser-webpack-plugin 替代 uglifyjs-webpack-plugin因为 Terser 通常更快且支持更现代的 JavaScript 语法。 webpack4.26.0版本之前压缩插件是uglifyjs-webpack-plugin从webpack4.26.0版本开始换成了terser-webpack-pluginnpm install terser-webpack-plugin4.2.3 --save-dev const TerserPlugin require(terser-webpack-plugin); const webpackConfig merge(baseWebpackConfig, { mode: production, optimization: { minimize: true, minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true, // 移除 console 语句 // drop_debugger: true, // 移除 debugger 语句 }, // format: { // comments: false, // 移除所有注释 // }, }, // sourceMap: false, // 生成 Source Map cache: true, // 启用缓存 parallel: false, // 启用并行压缩 extractComments: false, // 禁止提取注释到单独的文件 })], })2. OptimizeCSSAssetsPlugin用于优化和压缩 CSS 资源spa例子现状webpack4babeluglifyjsnode10.15.3vue2.6.11打包时间不生成map6min、生成map20min4核cpu会顶满导致无法和其他项目并行构建目标单核、cpu不超60%、4分钟方案webpack4esbuild编译terser压缩webpack4esbuild编译esbuild压缩webpack5esbuild编译terser压缩webpack5esbuild编译esbuild压缩vite对vue2.6不是完全兼容需要安装插件vite-plugin-vue2支持vite更适用于Vue3项目实现项目把cpu顶满的问题webpack4.26.0卸载uglifyjs-webpack-plugin插件 安装terser-webpack-plugin4.2.3进行js代码压缩并设置parallel为false关闭并行。// build/webpack.prod.conf.js const TerserPlugin require(terser-webpack-plugin); const webpackConfig merge(baseWebpackConfig, { mode: production, optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, chunks: initial, name: vendors, }, async-vendors: { test: /[\\/]node_modules[\\/]/, minChunks: 2, chunks: async, name: async-vendors } } }, runtimeChunk: { name: runtime } runtimeChunk: { name: runtime }, minimize: true, minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true, // 移除 console 语句 // drop_debugger: true, // 移除 debugger 语句 }, // format: { // comments: false, // 移除所有注释 // }, }, cache: true, // 启用缓存 // sourceMap: false, // 生成 Source Map parallel: false, // 启用并行压缩 extractComments: false, // 禁止提取注释到单独的文件 })], },2. 项目构建时间过长babel-loader换成esbuild-loadernode12spa项目node为10.15.3先把node升级到16.18.0运行npm installnpm run devnpm run build确认项目没有问题先检查.babelrc文件如果配置为如下{ presets: [ [env, { modules: false, targets: { browsers: [ 1%, last 2 versions, not ie 8] } }], stage-2 ], plugins: [ transform-vue-jsx, transform-runtime, ] }换成esbuild-loader后需要卸载插件babel-preset-envbabel-plugin-transform-vue-jsxbabel-plugin-transform-runtime卸载无用的babel插件。卸载babel-loader插件 安装esbuild0.21.5 esbuild-loader4.2.2cache-loader4.1.0进行js代码压缩// build/webpack.base.conf.js module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: vue-loader, options: vueLoaderConfig }, { test: /\.js$/, include: [resolve(src)], exclude: /node_modules/, use: [ cache-loader, // 使用 cache-loader 进行缓存 { loader: esbuild-loader, options: { loader: jsx, // 指定加载器类型 target: es2015, // 指定目标环境 } } ] }, ... ] },
