本文主要是介绍【优化方案】vue项目chunk-vendors.js、app.js文件太大，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
没做优化前
第一步: 前端配置
先安装 "compression-webpack-plugin": "^5.0.1", 插件，为了不会出现兼容先，按照当前版本
然后在vue.config.js文件中修改配置
（1）将打包的js文件分割成多个js以免加载很慢
（2）打包时将js文件转gzip格式
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
devServer: {
open: true,
proxy: {
[process.env.VUE_APP_BASE_JAVA_API]: {
target: process.env.VUE_APP_BASE_JAVA_URL, // 测试
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_JAVA_API]: ''
}
},
[process.env.VUE_APP_BASE_PHP_API]: {
target: process.env.VUE_APP_BASE_PHP_URL, // 测试
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_PHP_API]: ''
}
}
},
},
// 静态资源路径
publicPath: './',
// 输出文件目录
outputDir: 'dist',
// 静态资源目录
assetsDir: 'other2',
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false, //不输出map文件
configureWebpack: {
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter'
},
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
],
// 开启分离 js
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
}
},
//关闭 webpack 的性能提示
performance: {
hints: false
}
},
transpileDependencies: ['webpack-dev-server/client'],
chainWebpack: (config) => {
config.entry.app = ['babel-polyfill', './src/main.js'];
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
/* 添加分析工具*/
if (process.env.NODE_ENV === 'production') {
if (process.env.npm_config_report) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
config.plugins.delete('prefetch')
}
}
}
}
配置好打包后的效果
第二步：服务器nginx配置
具体可以参考：nginx服务器配置
这篇关于【优化方案】vue项目chunk-vendors.js、app.js文件太大的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
