日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

...
 
  
  

修改 build/webpack.base.conf.js

module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: './src/main.js'
 },
 externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex',
  'vue-resource': 'VueResource'
 },
 ...
}

修改src/main.js src/router/index.js 注釋掉import引入的vue,vue-resource

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

路由懶加載

const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')
const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/page/List')), 'workCircleList')

將一些靜態(tài)js css放到其他地方（如OSS），減小服務(wù)器壓力

注意這里的js文件，需要將結(jié)果拋出，然后在需要用到該js的組件中import引入

按需加載三方資源，如iview,建議按需引入iview中的組件

按需引用請(qǐng)查看iview官方文檔iview

使用nginx開啟gzip減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮?/strong>

配置nginx，可以參考Nginx開啟Gzip壓縮大幅提高頁(yè)面加載速度

webpack開啟gzip壓縮

這里需要配合Nginx服務(wù)器，Nginx開啟gzip

config/index.js中

module.exports = {
 build: {
  ...
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: true, // 就是這里開啟gzip,vue-cli搭建項(xiàng)目，這里默認(rèn)為false
  productionGzipExtensions: ['js', 'css'],

  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 }
}

build/webpack.prod.conf.js中

使用vue-cli構(gòu)建項(xiàng)目時(shí)，默認(rèn)會(huì)有這段代碼

if (config.build.productionGzip) {
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
   asset: '[path].gz[query]',
   algorithm: 'gzip',
   test: new RegExp(
    '\\.(' +
    config.build.productionGzipExtensions.join('|') +
    ')$'
   ),
   threshold: 10240,
   minRatio: 0.8
  })
 )
}

若首屏為登錄頁(yè)，可以做成多入口，登錄頁(yè)單獨(dú)分離為一個(gè)入口

修改webpack配置

在原先只有一個(gè)入口叫app的基礎(chǔ)上，再加一個(gè)叫l(wèi)ogin的入口，指向另一個(gè)入口js文件；

既然是兩個(gè)頁(yè)面，那么原先只有一個(gè)的HtmlWebpackPlugin也需要再添加一個(gè)，并且filename和template改成登錄頁(yè)的；

HtmlWebpackPlugin默認(rèn)會(huì)把所有資源放進(jìn)html，為了去掉不需要的資源，需要在HtmlWebpackPlugin選項(xiàng)里分別添加excludeChunks: ['login']和excludeChunks: ['app']；

原先的某些CommonsChunkPlugin會(huì)導(dǎo)致報(bào)錯(cuò)，刪掉只剩下一個(gè)manifest的CommonsChunkPlugin就好。

添加登錄相關(guān)文件

添加之前配好的login入口文件，與app類似，但是去掉登錄頁(yè)不需要的東西，如用不到的組件和樣式等；

添加login入口專用的router配置文件，去掉其他路由，只留下登錄頁(yè)一個(gè)就好：

只留登錄路由

添加登錄頁(yè)的html模板，也是去掉登錄里用不到的資源。

修改其他細(xì)節(jié)

登錄完不是用vue-router的push方法，而是改成直接修改location.href跳到另一個(gè)頁(yè)面；

去除原來(lái)app路由中的login；

登錄頁(yè)中可以使用隱藏的iframe等方式預(yù)加載app頁(yè)面中的數(shù)據(jù)（猜想）。

以上是“VUE如何優(yōu)化單頁(yè)應(yīng)用首屏加載速度”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！