vue2 打包生成的js文件过大优化

在Vue项目中,打包生成的JS文件过大通常是由于多种因素造成的,包括但不限于第三方库过大、冗余代码、未压缩的资源等。下面是一些优化Vue项目打包后JS文件大小的常见方法:

1.代码分割 chunk

使用Webpack的代码分割功能,可以将代码分割成多个小的chunk,实现按需加载。

2.启用 Gzip/Brotli 压缩

打包时生成 Gzip 文件(需安装 compression-webpack-plugin

复制代码
npm install compression-webpack-plugin --save-dev

npm install path --save-dev

在vue.config.js中配置

复制代码
const path = require('path')  // 引入path模块
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
 // 关闭生产环境sourceMap(减少50%+体积)
  productionSourceMap: false,

  configureWebpack: { // 配置webpack的字段。
    //打包忽略第三方库
    externals:envBoole ? cdn.externals : {},
    //  开启代码分割
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 20000, // 最小chunk size 20KB
        maxSize: 244000, // 超过244KB自动拆分
        cacheGroups: {
          vendor: {
              test: /[\/]node_modules[\/]/,
              name(module) {
                  // 提取node_modules中的包名作为chunk名
                  const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
                  // 兼容npm包名中的@符号
                  return `npm.${packageName.replace('@', '')}`;
              },
              priority: 10,
              reuseExistingChunk: true,
          },
          // 拆分公共组件
          common: {
              name: 'common',
              minChunks: 2,
              priority: 5,
              reuseExistingChunk: true
          }
        }
      }
    },
    //  开启gzip压缩
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  },

}
相关推荐
!执行3 小时前
webpack 相关配置
webpack
gnip3 小时前
结合Worker通知应用更新
前端·javascript
叶玳言3 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳3 小时前
HTML 基本结构
前端
Gazer_S3 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐3 小时前
Html重绘和重排
前端·html
_Rookie._3 小时前
vue3 使用css变量
前端·javascript·html
杨超越luckly3 小时前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
蔗理苦3 小时前
2025-09-04 HTML3——区块布局与表单
前端·css·html