vue打包体积优化
一、webpack-bundle-analyzer工具
1、安装
终端运行命令，根据包管理器自行选择命令
#npm npm install --save-dev webpack-bundle-analyzer #yarn yard add -D webpack-bundle-analyzer
2、代码引入
将代码引入到vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
configureWebpack:{
plugins:[
new BundleAnalyzerPlugin()
]
},
publicPath:process.env.NODE_ENV === "production" ? "/":"/",
devServer:{
host:'localhost',
port:port,
open:true,
},
}
3、命令
引入完成执行 npm run build --report 命令，命令执行完会自动打开浏览器页面，如图：
start:打包之前输出文件大小
prased:打包之后输出文件大小
gizppen:开启gzip压缩后输出文件大小
4、减小打包体积，删除多余包
#删除多余包 npm uninstall [包名] #例 npm uninstall tinymce
5、常见问题
报错： npm error:Maximum call stack size exceeded
删除 node_module，执行命令：npm cache clean --force , npm install ,在执行命令前可以把package.json中的tinymce删除。
二、babel-plugin-component工具
1、安装
终端运行命令
#npm npm install babel-plugin-component -D
2、代码引入
将代码引入到babel.config.js，以ElementUi 为例
module.exports = {
presets: [
["@babel/preset-env", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3、命令
执行打包命令，查看体积 npm run build --report
三、compression-webpack-plugin工具（gzip压缩代码）
1、安装
终端运行命令
#npm npm install compression-webpack-plugin -D
2、代码引入
将代码引入到vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
chainWebpack: config => {
// 对超过10kb的文件gzip压缩
config.plugin('compressionPlugin').use(
new CompressionWebpackPlugin({
test: /\.(js|css|html)$/,// 匹配文件名
threshold: 10240,
})
)
}
}
3、命令
执行打包命令，查看打包文件，npm run build，产生压缩文件既开启成功
4、nginx配置
服务端开启gzip功能，加入代码
server{
//开启和关闭gzip模式
gzip on;
//gizp压缩起点，文件大于2k才进行压缩;设置允许压缩的页面最小字节数，页面字节数从header头得content-length中进行获取。 默认值是0，不管页面多大都压缩。建议设置成大于2k的字节数，小于2k可能会越压越大。
gzip_min_length 2k;
// 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;
// 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
// gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 2;
//进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
// 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
}
5、发布资源，检测gzip是否开启成功
可借用工具检测：链接
6、常见问题
报错：Cannot read property ‘tapPromise’ of undefined ，compression-webpack-plugin版本问题，不可以使用最新版本，需指定版本下载
#先执行卸载命令 npm uninstall compression-webpack-plugin #执行安装命令 npm i compression-webpack-plugin@6.1.1
四、清除console日志
1、安装
终端运行命令
#npm npm install babel-plugin-transform-remove-console --save-dev
2、代码引入
将代码引入到babel.config.js
// 这是项目发布阶段需要用到的bebel插件
const prodPlugins = []
// 如果是发布阶段,处于生产环境,就向prodPlugins数组里添加一个插件
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
...prodPlugins // 这里...展开运算符，把上面定义的prodPlugins数组里面的每一项展开添加到这个plugins数组里面
]
}
