『技术』Vue 包大小优化--从 1.72M 到 94K
02
目标
这必须得优化一下,优化前得大致定一下目标,目标又需要指标来衡量,所以定了两个指标:
-
页面加载时间不多说,至少得 1s 以内,越快越好 -
包大小控制在 200k 以内
目标定了,然后就是定方案
-
代码混淆 -
资源放到 cdn,因为开发的时候图省事,资源放在 assets 下面,直接 require 引入了,这也是一个大头 -
无用库删除,功能相近的库合并,只用到少部分功能的库,看看能否自己实现 -
gzip 压缩 -
第三方库也放到 cdn
1. 代码混淆
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: (config) => {
// 引入uglifyjs-webpack-plugin
let UglifyPlugin = require('uglifyjs-webpack-plugin');
if (process.env.NODE_ENV == 'production') {
// 压缩混淆
config.mode = 'production'
// 将每个依赖包打包成单独的js文件
let optimization = {
minimizer: [new UglifyPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']
}
}
})]
}
Object.assign(config, {
optimization
})
} else {
// 为开发环境修改配置
config.mode = 'development'
}
}
}
}
2. 资源放到 cdn
3. 无用库删除
yarn build --report
4. gzip 压缩
// vue.config.js
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV == 'production') {
// ...
// gzip
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240,
minRatio: 0.8
}))
}
// ...
}
}
// nginx 直接开启下面的配置
gzip_static on;
5. 第三方库放到 cdn
module.exports = {
// ...
configureWebpack: (config) => {
if (process.env.NODE_ENV == 'production') {
// 第三方库不打包,使用 cdn
config.externals = {
vuetify: 'Vuetify'
}
} else {
// 为开发环境修改配置
config.mode = 'development'
config.externals = {
vuetify: 'Vuetify'
}
}
}
}
<link href="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.js"></script>
通过上面几个策略,最终包大小从 1.72 M 优化到 94k
总体看来,优化效果是明显的,但是还有后续可以做的事情:
-
更精细化优化,应该可以结合 webpack 做更深的定制化 -
对上面说到的 cdn 上的第三方库做整合,毕竟直接放在 index.html 里太散,并不是很好的项目结构,也不利于后面开发 -
对后续的代码开发做规范,比如三方库引用的规范、资源的引入规范等等,可以做的事情还是很多的 -
每次部署前的性能测试,主要看看页面加载速度是否达标