資訊專欄INFORMATION COLUMN
摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設(shè)置，項目首屏加載時會加載整個網(wǎng)站所有的文件，所以將文件拆開，點擊某個頁面時再加載該頁面的是一個很好的優(yōu)化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。
主要是首屏加載太慢。
大文件定位
我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。
安裝
npm install --save-dev webpack-bundle-analyzer
在webpack中設(shè)置如下，然后npm run dev 的時候默認會在8888端口顯示。
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
JS文件按需加載
如果沒有這個設(shè)置，項目首屏加載時會加載整個網(wǎng)站所有的JS文件，所以將JS文件拆開，點擊某個頁面時再加載該頁面的JS是一個很好的優(yōu)化方法。
這里用到的就是vue的組件懶加載。在router.js中，不要使用import的方法引入組件，使用require.ensure。
import index from "@/components/index"
const index = r => require.ensure( [], () => r (require("@/components/index"),"index"))
//如果寫了第二個參數(shù)，就打包到該`/JS/index` 的文件中。
//不寫第二個參數(shù)，就直接打包在`/JS` 目錄下。
const index = r => require.ensure( [], () => r (require("@/components/index")))
使用cdn
打包時，把vue、vuex、vue-router、axios等，換用國內(nèi)的bootcdn 直接引入到根目錄的index.html中。
在webpack設(shè)置中添加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
})
參考文章
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113724.html
摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設(shè)置，項目首屏加載時會加載整個網(wǎng)站所有的文件，所以將文件拆開，點擊某個頁面時再加載該頁面的是一個很好的優(yōu)化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。 主要是首屏加載太慢。 大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。 ...
摘要：第一次寫項目，但是在實踐的過程發(fā)現(xiàn)了很多坑，這篇文章主要講述的是項目首屏加載過慢的大坑。建議使用，相對來說算是比較快的了。在官方文檔中有相關(guān)實現(xiàn)的代碼，很簡單。畢竟首屏加載，優(yōu)化都得靠了。 第一次寫 vue spa項目，但是在實踐的過程發(fā)現(xiàn)了很多坑，這篇文章主要講述的是spa項目首屏加載過慢的大坑。在webpack的配置中，在打包的過程中，會將所有的庫都打包到vendor.js中，所以...
摘要：不推薦移動端瀏覽器前端優(yōu)化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展 開車...
摘要：不推薦移動端瀏覽器前端優(yōu)化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展 開車...
閱讀 3137·2021-11-24 11:14
閱讀 3661·2021-11-22 15:22
閱讀 3279·2021-09-27 13:36
閱讀 798·2021-08-31 14:29
閱讀 1385·2019-08-30 15:55
閱讀 1856·2019-08-29 17:29
閱讀 1195·2019-08-29 16:24
閱讀 2529·2019-08-26 13:48
