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
      })
    ]
  },

}
相关推荐
Zuckjet_2 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801462 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店4 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown4 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip5 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿5 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.6 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰6 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息6 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC7 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi