好好学习 ,天天向上。Are you ready?
VUE打包后文件太大解决方法
首先了解是哪个文件过大,这里推荐文件可视化插件
npm install webpack-bundle-analyzer -S -D
在vue.config.js中设置
module.exports = {
chainWebpack: config => {
config.resolve.alias.set('@', resolve('src'))
config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
设置后执行npm run build 就会生成文件可视化图片,然后去查阅
找到对应的文件去优化,建议路由懒加载,图片压缩,cdn引入
一一解决后dist文件还大怎么办,使用gzip,gzip压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。
方法奉上
使用插件
npm install compression-webpack-plugin -D
在vue.config.js中设置
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
threshold: 10240, //对10K以上的数据进行压缩
minRatio: 0.8,
deleteOriginalAssets: false //是否删除源文件
})
]
}
}
设置之后 npm run build
等等~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
不要慌~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
这是compression-webpack-plugin版本导致的 npm i 下载的是最新版本,咱们可以给他在package.json改成
"compression-webpack-plugin": "1.1.12",
直接copy 然后再npm i
ok ok ok !
npm run build
过大文件已压缩,完成任务,提升速度!!!