桓台网站淮南网站建设服务

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

1.代码分割 chunk

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

2.启用 Gzip/Brotli 压缩

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

npm install compression-webpack-plugin --save-devnpm 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 20KBmaxSize: 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})]},}