前言：最近用vue-cli 3.0 構建一個小型的工單管理系統，完工后build發現一個chunk-vendors包就達到985kb，加上其他一些資源文件，首頁的下載總共大小快要2M。測試給的第一個反饋就是首屏慢慢慢慢慢！
根據首屏加載資源文件過大，進行一下優化：
1. 路由懶加載
結合Vue的異步組件再結合webpack的代碼分割，我們可以輕松的實現路由懶加載。
vue-cli 3.0 模式就使用了Babel，我們需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。
// 安裝插件 syntax-dynamic-importcnpm install --save-dev @babel/plugin-syntax-dynamic-import// 修改babel.config.jsmodule.exports = { "presets": [ "@vue/app" ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }, "syntax-dynamic-import" ] ]}// 修改路由組件的加載（router/index.js）{ path: '/', name: 'home', component: resolve => require(['pages/Home'], resolve)}使用了路由懶加載，已經把原來的chunk-vendors降到了789kb，但加載789kb還是太大。那繼續優化
2. 服務器開啟Gzip
Gzip是GNU zip的縮寫，顧名思義是一種壓縮技術。它將瀏覽器請求的文件先在服務器端進行壓縮，然后傳遞給瀏覽器，瀏覽器解壓之后再進行頁面的解析工作。在服務端開啟Gzip支持后，我們前端需要提供資源壓縮包。
通過CompressionWebpackPlugin插件build提供壓縮
// 安裝插件cnpm i --save-dev compression-webpack-plugin// 在vue-config.js 中加入const CompressionWebpackPlugin = require('compression-webpack-plugin');const productionGzipExtensions = ['js', 'css'];const isProduction = process.env.NODE_ENV === 'production';.....module.exports = {.... configureWebpack: config => { if (isProduction) { config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('//.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 })) } }}現在我們看一下build后的壓縮包的大小，大概減少了三分之二
3. 啟用CDN加速
用Gzip已把文件的大小減少了三分之二了，加載速度從之前2.7秒多到現在的1.8秒多，但這個還是得不到滿足。那我們就把那些不太可能改動的代碼或者庫分離出來，繼續減小單個chunk-vendors，然后通過CDN加載進行加速加載資源。
// 修改vue.config.js 分離不常用代碼庫module.exports = { configureWebpack: config => { if (isProduction) { config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'moment': 'moment' } } }}// 在public文件夾的index.html 加載<!-- CND --><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>現在再build后看下大小和訪問速度：
CDN優化后.jpg
可以看到chunk-verdors 又減少了114kb，通過CDN加載整個文檔速度已經接近1秒。
4. 修改uglifyOptions去除console來減少文件大小
// 安裝uglifyjs-webpack-plugincnpm install uglifyjs-webpack-plugin --save-dev// 修改vue.config.js configureWebpack: config => { if (isProduction) { ..... config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true, drop_console: true, }, }, sourceMap: false, parallel: true, }) ) } }如果代碼中打了很log，這個優化還是有點效果的。
總結
首屏優化工作告一段落，通過以上四項的優化，已經很大的提升了首屏的加載速度。如果想再進一步優化還是空間的，例如從代碼層面去減少代碼量（代碼復用率）。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
