怎么優(yōu)化Vue包的大小？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
代碼混淆
資源放到 cdn，因?yàn)殚_發(fā)的時(shí)候圖省事，資源放在 assets 下面，直接 require 引入了，這也是一個(gè)大頭
無用庫刪除，功能相近的庫合并，只用到少部分功能的庫，看看能否自己實(shí)現(xiàn)
gzip 壓縮
第三方庫也放到 cdn
1 - 3 三個(gè)優(yōu)化方案是首先想到的，然后網(wǎng)上搜了下 Vue 對(duì)應(yīng)的優(yōu)化策略，又增加了后面兩個(gè)
還有一些其他方案，比如路由懶加載，但是因?yàn)檫@個(gè)網(wǎng)站主要內(nèi)容都集中在首頁，所以這個(gè)就沒考慮了（好東西雖多，但因地制宜好）
所以一共定了 5 個(gè)優(yōu)化策略，下面就開干
代碼混淆就不多說了，一方面節(jié)省包大小，一方面還能增加一些反編譯的難度，直接網(wǎng)上搜了 Vue 混淆配置（畢竟要站在巨人肩膀上），試了下確實(shí)好使，配置如下
重慶分公司
重慶分公司
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'
// 將每個(gè)依賴包打包成單獨(dú)的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 {
// 為開發(fā)環(huán)境修改配置
config.mode = 'development'
}
}
}
}這一步也容易做，資源全部都放到阿里云 oss 上，幾分鐘搞定
這一步花了不少時(shí)間，因?yàn)殚_發(fā)的時(shí)候圖省事，很多庫直接 github 上一搜，yarn add 引入就完事了，現(xiàn)在需要細(xì)細(xì)的再拆分一下
在打包命令后面加 --report 看一下打包的狀態(tài)
yarn build --report
首先是去掉 ElementUi（gzip 壓縮后大約 158k），開發(fā)的時(shí)候 ElementUi 和 Vuetify 混用了，其實(shí)只留一個(gè) Vuetify 就夠了，然后對(duì)界面做一些小小的改造就完成了
然后是 lodash，只用到了其中幾個(gè)方法，但是他的整個(gè)體積不小，gzip 壓縮后大概 25k，于是找了 lodash 源碼，打算把用到的幾個(gè)方法抽出來，但是 lodash 代碼嵌套、引用太深了，不太抽，干脆直接干掉這個(gè)庫，找了幾個(gè)更純粹的實(shí)現(xiàn)做了替換，主要時(shí)間花在了讀 lodash 源碼上
再然后就是 vuescroll，在實(shí)現(xiàn)滾動(dòng)條樣式自定義的時(shí)候，偷懶直接用了這個(gè)庫，發(fā)現(xiàn)這個(gè)庫體積還是不小的，gzip 壓縮后將近 20k，直接干掉，自己寫一下樣式吧（這件事告訴我們，現(xiàn)在偷的懶，以后會(huì)以別的方式還回來的 0_0）
這樣就干掉了幾個(gè)大頭庫
這個(gè)是網(wǎng)上找的解決方案，直接在 vue.config.js 里加點(diǎn)配置，然后 nginx 里也需要做一下對(duì)應(yīng)的配置
// 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;這樣打包以后，會(huì)生成 .gz 文件，nginx 會(huì)自動(dòng)使用 .gz 文件
這里主要是處理 Vuetify 這個(gè)庫，畢竟 gzip 以后也有將近 50k 的大小，放到 cdn 上會(huì)快一些
首先是打包配置中去掉 Vuetify
module.exports = {
// ...
configureWebpack: (config) => {
if (process.env.NODE_ENV == 'production') {
// 第三方庫不打包，使用 cdn
config.externals = {
vuetify: 'Vuetify'
}
} else {
// 為開發(fā)環(huán)境修改配置
config.mode = 'development'
config.externals = {
vuetify: 'Vuetify'
}
}
}
}然后在 index.html 里手動(dòng)加載 vuetify css 和 js
