前言
以下实现方式都是基于 vue-cli5 搭建 内置webpack5，如有版本不同，大家可以自行查找相对应版本的配置方式。
一、vue.config.js设置 productionSourceMap 为false
主要作用去除打包后生成的 map 文件，减少代码体积
map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
使用：
module.exports = defineConfig({
productionSourceMap: false,
})
配置前后打包文件大小对比:
总结：
在设置了vue.config.js之后，就不会生成map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码
二 、配置 image-webpack-loader 图片压缩
尽量使用cnpm 下载 ，这个包内置中有个image-giftce(忘了是不是这样拼了) ，有几个文件可能会下载不下来 ，打包运行时会报undefined ，所以推荐cnpm ，下不来的话多下几次 。
使用:
cnpm install image-webpack-loader
module.exports = defineConfig({
chainWebpack: (config) => {
config.module
.rule('min-image')
.test(/.(png|jpe?g|gif|svg)(?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
.end()
config.plugins.delete("prefetch") //删除预加载 提升首次加载速度
},
});
压缩前后文件大小对比:
总结：
压缩图片的方案有很多实现方式，也可以在使用图片前就压缩好放进项目中，也可以选择配置压缩的方法，归根到底目的是要把项目体积变小，实现方式大家自由选择，目的是不变的。
三、排查无用文件 安装插件useless-files-w5-webpack-plugin
避免无用文件占据体积，当然这也可以从开发过程中就避免，但我个人觉得太麻烦，有时候也会忽略了，所以还是配置文件一次查找，清除。
由于我的项目是基于webpack5开发的，webpack5以下的可以使用useless-files-webpack-plugin这个插件
使用：
npm i useless-files-w5-webpack-plugin -D
module.exports = defineConfig({
configureWebpack:{
plugins: [
new UnusedFilesW5WebpackPlugin({
root: ['./src'], // 项目目录
output: './fileList.json', // 输出文件列表
clean: false, // 是否删除文件, 不建议开启，手动删除比较好，防止误删
exclude: ['node_modules'] // 排除文件列表
})
]
}
})
输出无用文件如下:
四、利用缓存提升二次构建速度
利用webpack5 内置缓存配置
文档连接-->webpack.docschina.org/configurati…
第一次 68181ms --> 第二次 9226ms
module.exports = defineConfig({
configureWebpack: {
cache: {
type: 'filesystem',
allowCollectingMemory: true
},
}
})
五、引入cdn 减少打包体积
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
//引入echarts
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
</body>
module.exports = defineConfig({
configureWebpack: {
externals: {
"./cptable": "var cptable",
'echarts': 'echarts'
},
},
});
最后项目总体优化前后对比
dist文件：18.8M --> 3.69M
提升二次构建缓存
解析编译速度 68181ms --> 9226ms
