app.js文件过大可分为两部分优化：
一：减小app.js文件的大小：
1.代码压缩：
在webpack.prod.config.js使用compression-webpack-plugin,npm下载即可。生产环境启用gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin');
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
Nginx的gzip压缩：
在nginx中的default.conf中配置：
server{
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6].";
...
}
gzip on;：启用gzip压缩。gzip_types：定义哪些MIME类型的响应需要被压缩。你可以根据需要添加或删除类型。gzip_proxied：允许或禁止压缩代理请求的响应。any意味着压缩所有代理请求的响应。gzip_vary on;：在响应头中添加Vary: Accept-Encoding，告诉客户端内容已通过gzip压缩。gzip_comp_level：设置压缩级别，范围从1（最快，压缩率最低）到9（最慢，压缩率最高）。gzip_buffers：设置用于压缩响应的缓冲数量和大小。gzip_http_version：设置支持压缩的HTTP协议版本（通常是1.1）。gzip_disable：针对特定的User-Agent禁用gzip压缩，这里是一个示例，禁用了IE6及更早版本的压缩
css压缩，在webpack.base.config.js中使用mini-css-extract-plugin，注意vue，webpack版本
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
}
路由懒加载：
const job = () => import('../views/job/layout.vue');
const list = () => import('../views/job/list.vue');
const detail = () => import('../views/job/detail.vue');
const jobRouter = {
name: 'job',
path: '/job',
component: job,
children: [
{
name: 'jobList',
path: 'jobList',
component: list,
},
{
name: 'jobDetail',
path: 'jobDetail',
component: detail,
}
]
}
export default jobRouter
二：app.js分割
1.使用splitChunks
webpack.base.conf.js文件中使用webpack-bundle-analyzer排查包的大小针对性分割成chunk.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
在module.exports中使用：生产关闭需自行配置或者注释
plugins: [
new BundleAnalyzerPlugin()
]，
检查完包的大小后 分离出过大的包。在在module.exports中optimization配置：
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
antd: {
test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
name: 'chunk-antd',
chunks: 'all',
},
moment:{
test: /[\\/]node_modules[\\/]moment[\\/]/,
name: 'chunk-moment',
chunks: 'all',
} ,
elementUI: {
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
name: 'chunk-elementUI',
chunks: 'all',
},
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial',
// 也可以设置minSize和maxSize来进一步控制
},
'lodash-vendors': {
test: /[\\/]node_modules[\\/]lodash/,
name: 'vendors-lodash',
chunks: 'all',
},
'echarts-vendors': {
test: /[\\/]node_modules[\\/]echarts/,
name: 'vendors-echarts',
chunks: 'all',
},
'icon-park': {
test: /[\\/]node_modules[\\/]@icon-park/,
name: 'chunk-icon-park',
chunks: 'all',
},
'xlsx': {
test: /[\\/]node_modules[\\/]xlsx/,
name: 'chunk-xlsx',
chunks: 'all',
},
default: {
minChunks: 1,
priority: -20,
reuseExistingChunk: true,
maxSize:1000000,
chunks: 'all',
},
}
},
},
抽离出部分较大的npm包和css，default会将app.js变的很小，但是自身可能会过大，设置maxSize超过1000000字节（约1MB），如果某个chunk的大小超过这个限制，Webpack会尝试将其分割成更小的chunks。priority为这个属性用于设置规则的优先级。优先级被设置为-20，这意味着这个规则比
vendors
规则（优先级为-10）的优先级更低。Webpack在处理代码块时，会按照优先级的顺序应用规则。
总结：代码体积大就压缩，压缩不行就切割成chunk。
版权归原作者 c1553188320 所有， 如有侵权，请联系我们删除。