189 8069 5689
怎么优化Vue包的大小？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
代码混淆
资源放到 cdn，因为开发的时候图省事，资源放在 assets 下面，直接 require 引入了，这也是一个大头
无用库删除，功能相近的库合并，只用到少部分功能的库，看看能否自己实现
gzip 压缩
第三方库也放到 cdn
1 - 3 三个优化方案是首先想到的，然后网上搜了下 Vue 对应的优化策略，又增加了后面两个
还有一些其他方案，比如路由懒加载，但是因为这个网站主要内容都集中在首页，所以这个就没考虑了（好东西虽多，但因地制宜好）
所以一共定了 5 个优化策略，下面就开干
代码混淆就不多说了，一方面节省包大小，一方面还能增加一些反编译的难度，直接网上搜了 Vue 混淆配置（毕竟要站在巨人肩膀上），试了下确实好使，配置如下
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'
}
}
}
}这一步也容易做，资源全部都放到阿里云 oss 上，几分钟搞定
这一步花了不少时间，因为开发的时候图省事，很多库直接 github 上一搜，yarn add 引入就完事了，现在需要细细的再拆分一下
在打包命令后面加 --report 看一下打包的状态
yarn build --report
首先是去掉 ElementUi（gzip 压缩后大约 158k），开发的时候 ElementUi 和 Vuetify 混用了，其实只留一个 Vuetify 就够了，然后对界面做一些小小的改造就完成了
然后是 lodash，只用到了其中几个方法，但是他的整个体积不小，gzip 压缩后大概 25k，于是找了 lodash 源码，打算把用到的几个方法抽出来，但是 lodash 代码嵌套、引用太深了，不太抽，干脆直接干掉这个库，找了几个更纯粹的实现做了替换，主要时间花在了读 lodash 源码上
再然后就是 vuescroll，在实现滚动条样式自定义的时候，偷懒直接用了这个库，发现这个库体积还是不小的，gzip 压缩后将近 20k，直接干掉，自己写一下样式吧（这件事告诉我们，现在偷的懒，以后会以别的方式还回来的 0_0）
这样就干掉了几个大头库
这个是网上找的解决方案，直接在 vue.config.js 里加点配置，然后 nginx 里也需要做一下对应的配置
// 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;这样打包以后，会生成 .gz 文件，nginx 会自动使用 .gz 文件
这里主要是处理 Vuetify 这个库，毕竟 gzip 以后也有将近 50k 的大小，放到 cdn 上会快一些
首先是打包配置中去掉 Vuetify
module.exports = {
// ...
configureWebpack: (config) => {
if (process.env.NODE_ENV == 'production') {
// 第三方库不打包，使用 cdn
config.externals = {
vuetify: 'Vuetify'
}
} else {
// 为开发环境修改配置
config.mode = 'development'
config.externals = {
vuetify: 'Vuetify'
}
}
}
}然后在 index.html 里手动加载 vuetify css 和 js
