vue3的项⽬打包优化
1.webpack-bundle-analyzer 分析包
vuecli 2.x⾃带了分析⼯具------只要运⾏npm run build --report
如果是vuecli 3的话，先安装插件------npm intall webpack-bundle-analyzer –save-dev
在 vue.c o nfig.js中对 w ebpa c k进⾏配置
⽣产，开发都可以看到打包⽂件的⼤⼩：（npm  run serve跟npm run build）
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
但是在开发项⽬启动的时候，去打包就会有端⼝号报错的问题；所以⼀般只在⽣产环境（执⾏打包的时候）去配置
⽣产可以看到打包⽂件的⼤⼩：（npm  run build跟npm run build --report）
chainWebpack: (config) => {
/* 添加分析⼯具*/
if (v.NODE_ENV === 'production') {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
// ⽣成⼀个静态html，report.html
//  config
//          .plugin('webpack-report').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [ { analyzerMode: 'static' } ]);
config.plugins.delete('prefetch')
} }
因为 vuec li 3默认开启 prefetc h(预先加载模块)，提前获取⽤户未来可能会访问的内容，在⾸屏会把这⼗⼏个路由⽂件，都⼀⼝⽓下载了
所以我们要关闭这个功能，在 vue.c o nfig.js中设置（如上
c o nfig.plugins.delete('prefetc h')）
2.配置gzip压缩
安装 c o m pr essio n-w ebpa c k-plugin------npm insta ll c o mpressio n-w ebpa c k-
m pressio
plugin --sa ve-dev
// 在 ig.js中引⼊gzip并修改 webpack配置
const CompressionPlugin = require('compression-webpack-plugin');
configureWebpack: {
plugins: [
new CompressionPlugin({
test:/\.js$|\.html$|\.css/,// 哪些⽂件要压缩
// filename: '[path].gz[query]',　// 压缩后的⽂件名
threshold:0,//对只有⼤⼩⼤于该值的资源会被进⾏压缩
algorithm:'gzip',　// 使⽤gzip压缩
minRatio:0.8,　// 压缩率⼩于0.8才会压缩
deleteOriginalAssets:false // 删除未压缩的⽂件，谨慎设置，如果希望提供⾮gzip的资源，可不设置或者设置为false
})
],
}
};
configureWebpack:config=>{
v.NODE_ENV ==='production') {
config.plugins.push(
...[newCompressionWebpackPlugin({
filename:'[path].gz[query]',
algorithm:'gzip',
test:/\.(js|css|html|svg)$/i,
threshold:2048,
minRatio:0.8
})
] );
}
}
3. w ebpa c k splitChunk s(提取公共代码，防⽌代码被重复打包，拆分过⼤的js⽂件，合并零散的js⽂件)
chainWebpack: config=> {
if (v.NODE_ENV === 'production') {
config.optimization.splitChunks({
cacheGroups: {
vendor: {
chunks:'all',
test:/node_modules/,
name:'vendor',
minChunks:1,
maxInitialRequests:5,
minSize:0,
priority:100
},
common: {
chunks:'all',
test:/[\\/]src[\\/]js[\\/]/,
name:'common',
minChunks:2,
maxInitialRequests:5,
minSize:0,
priority:60
},
styles: {
name:'styles',
test:/\.(sa|sc|c)ss$/,
chunks:'all',
enforce:true
},
runtimeChunk: {
name:'manifest'
}
}
})
}
ant安装包}
4.图⽚压缩 （⼩图⽚压缩成 ba se64 格式，1可以⾃⼰⽤压缩软件去压
缩，2vue.c o nfig.js中w ebpa c k配置  ）
npm install  image-webpack-loader -D
---------------------------------------------------
chainWebpack: config => {
// 10kb以内的图⽚会被打包成内联元素
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, {limit: 10240}));
}
};
--------------------------------------------------
chainWebpack: config => {
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true }) .end()
},
5.第三⽅库⽤c dn引⼊ （第三⽅库两个优化⽅向1.按需加载2.c dn资源引⼊）
moment，ant-design-vue
1.index.html引⼊

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。