vue-cli項目優化，縮短首屏加載時間

lufficc 發布于2019-08-29 16:24 / 1142人閱讀

摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設置，項目首屏加載時會加載整個網站所有的文件，所以將文件拆開，點擊某個頁面時再加載該頁面的是一個很好的優化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。

主要是首屏加載太慢。

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

npm install --save-dev webpack-bundle-analyzer

在webpack中設置如下，然后npm run dev 的時候默認會在8888端口顯示。

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

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

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")))

使用cdn
打包時，把vue、vuex、vue-router、axios等，換用國內的bootcdn 直接引入到根目錄的index.html中。

在webpack設置中添加externals，忽略不需要打包的庫。

externals: {  
  "vue": "Vue",  
  "vue-router": "VueRouter",  
  "vuex": "Vuex",  
  "axios": "axios"  
}

在index.html中使用cdn引入。

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

var HtmlWebpackPlugin = require("html-webpack-plugin");
new HtmlWebpackPlugin({

  inject: "body",

})

壓縮代碼并移除console
使用UglifyJsPlugin 插件來壓縮代碼和移除console。

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true,
    pure_funcs: ["console.log"]
  },
  sourceMap: false
})

參考文章

云服務器 GPU云服務器首屏加載優化加載 listview加載優化大數據加載優化js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113724.html

vue-cli項目優化，縮短首屏加載時間

摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設置，項目首屏加載時會加載整個網站所有的文件，所以將文件拆開，點擊某個頁面時再加載該頁面的是一個很好的優化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。主要是首屏加載太慢。大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。 ...

hedzr 2019-08-26 12:11 評論0 收藏0
為了vue-cli spa項目優化首屏所做的事情

摘要：第一次寫項目，但是在實踐的過程發現了很多坑，這篇文章主要講述的是項目首屏加載過慢的大坑。建議使用，相對來說算是比較快的了。在官方文檔中有相關實現的代碼，很簡單。畢竟首屏加載，優化都得靠了。第一次寫 vue spa項目，但是在實踐的過程發現了很多坑，這篇文章主要講述的是spa項目首屏加載過慢的大坑。在webpack的配置中，在打包的過程中，會將所有的庫都打包到vendor.js中，所以...

layman 2019-08-20 18:24 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

ysl_unh 2019-08-21 17:30 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

Tecode 2019-08-01 17:58 評論0 收藏0