問題：vue如何優(yōu)化首屏加載速度？
問題描述：
在Vue項(xiàng)目中，引入到工程中的所有js、css文件，編譯時都會被打包進(jìn)vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫眾多，那么vendor.js文件體積將會相當(dāng)?shù)拇?，影響首屏的體驗(yàn)。
解決方法是：
將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個線程異步將vendor.js、外部的js等加載下來，達(dá)到加速首開的目的。外部的庫文件，可以使用CDN資源，或者別的服務(wù)器資源等。
幾種常用的優(yōu)化方法：
- 使用npm run build –report命令進(jìn)行大文件定位
- 路由的按需加載
- 將打包生成后 index.html頁面 里面的JS文件引入方式放在 body 的最后
- 用文檔的cdn文件代替 npm 安裝包
- UI庫的按需加載
- 開啟 Gzip 壓縮
詳解：
1、大文件定位：
我們可以使用 webpack可視化插件Webpack Bundle Analyzer查看工程js文件大小，然后有目的的解決過大的js文件。
使用命令：
npm run build --report
2、路由的按需加載：
3、將JS文件引入方式放在 body 的最后 ：
默認(rèn)情況下，build 后的 index.html 中，js 的引入是在 head 中，使用html-webpack-plugin插件，將inject的值改為body。就可以將 js 引入放到 body 最后。
首先下載插件：（一般vue-cli項(xiàng)目里默認(rèn)有，可以package.json里面檢查是否含有）
npm install html-webpack-plugin@2 --save-dev
在 build文件夾下webpack.base.conf.js配置：
var htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/script/main.js',
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new htmlWebpackPlugin({
inject: 'body'
})
]
}
即在 plugins 里面加上?htmlWebpackPlugin?插件。
4、用文檔的cdn文件代替 npm 安裝包：
用文檔的cdn文件代替，而不用打包到vender里面去。具體的做法是：
1、在index.html里面引入依賴庫js文件
// index.html <script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
2、在mian.js里面去掉第三方j(luò)s的import,因?yàn)樵诘谝徊揭呀?jīng)通過script標(biāo)簽引用進(jìn)來了。
3、把第三方庫的js文件從打包文件里去掉
即在
build/webpack.base.conf.js文件的module里面與rules同層加入externals：
5、UI庫的按需加載：
一般 UI庫 都提供按需加載的方法，按照文檔即可配置。
6.、開啟 Gzip 壓縮
Gzip:
在 config/index.js 設(shè)置?productionGzip?為?true，開啟 Gzip 壓縮
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至2705686032@qq.com 舉報，一經(jīng)查實(shí)，本站將立刻刪除。原文轉(zhuǎn)載： 原文出處：
