2019獨角獸企業重金招聘Python工程師標準>>>

前言：最近用vue-cli 3.0 構建一個小型的工單管理系統，完工后build發現一個chunk-vendors包就達到985kb，加上其他一些資源文件，首頁的下載總共大小快要2M。測試給的第一個反饋就是首屏慢慢慢慢慢！

根據首屏加載資源文件過大，進行一下優化：

1. 路由懶加載

結合Vue的異步組件再結合webpack的代碼分割，我們可以輕松的實現路由懶加載。

?vue-cli 3.0 模式就使用了Babel，我們需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。

// 安裝插件 syntax-dynamic-import cnpm install --save-dev @babel/plugin-syntax-dynamic-import// 修改babel.config.js module.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后的壓縮包的大小，大概減少了三分之二

?

build.jpg

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/2.5.17/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>

??如果使用了餓了么的element，不要使用beta版CDN，不然在日期組件上會遇到坑， 建議使用自家或者收費的CDN，保證CDN的可靠性
現在再build后看下大小和訪問速度：

?

CDN優化后.jpg

可以看到chunk-verdors 又減少了114kb，通過CDN加載整個文檔速度已經接近1秒。

4. 修改uglifyOptions去除console來減少文件大小

// 安裝uglifyjs-webpack-plugin cnpm install uglifyjs-webpack-plugin --save-dev// 修改vue.config.jsconfigureWebpack: config => {if (isProduction) {.....config.plugins.push(new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_debugger: true,drop_console: true,},},sourceMap: false,parallel: true,}) )}}

如果代碼中打了很log，這個優化還是有點效果的。

總結

首屏優化工作告一段落，通過以上四項的優化，已經很大的提升了首屏的加載速度。如果想再進一步優化還是空間的，例如從代碼層面去減少代碼量（代碼復用率）。

?

?

?

?

1.大文件定位?
我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。?
安裝

npm install --save-dev webpack-bundle-analyzer
在webpack中設置如下，然后npm run dev的時候會默認在瀏覽器上打開

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
? plugins: [
? ? new BundleAnalyzerPlugin()
? ]
}
?

2.JS文件按需加載?
如果沒有這個設置，項目首屏加載時會加載整個網站所有的JS文件，所以將JS文件拆開，點擊某個頁面時再加載該頁面的JS是一個很好的優化方法。?
這里用到的就是vue的組件懶加載。在router.js中，不要使用import的方法引入組件，使用require.ensure。

import index from '@/components/index'
const index = r => require.ensure([],() => r(require('@/components/index'),'index'))
// 如果寫了第二個參數，就打包到該`JS/index`的文件中
// 如果不寫第二個參數，就直接打包在`JS`目錄下。
const index = r => require.ensure([],() => r(require('@/components/index')))

3.將JS文件放在body的最后?
默認情況下，build后的index.html中，js的引入實在是在head中，使用html-webpack-plugin插件，將inject的值改為body。就可以將js引入放到body最后。

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
? ? inject:'body'
})
原文：https://blog.csdn.net/zjsfdx/article/details/80432793?

轉載于:https://my.oschina.net/u/232595/blog/3003906

總結

以上是生活随笔為你收集整理的vue首屏优化方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。