為了讓頁面更快完成加載, 第一時間呈現給客戶端, 也為了幫助客戶端節省流量資源, 我們可以開啟 vue-router 提供的按需加載功能, 讓客戶端打開頁面時, 只自動加載必要的資源文件, 當客戶端操作頁面, 切換功能模塊, 觸發頁面路由變化時, 再去加載相應需要的資源.

本系列博客的前面幾篇一直在講利用 webpack + vue 開發多頁面前端, 然而多頁面并不是利劍所指. 本篇將重點介紹使用 vue-router 開發單頁面前端, 并且實現按需加載的效果.

關于 vue-router 的按需加載, 官方的文檔點這里, 這篇博客主要是根據文檔的內容, 結合實例代碼, 按步驟,把需要的操作過一遍, 如果你覺得文檔描述不夠細節, 可以往下看看.

下面, 我們基于 blog_4 的代碼 , 把它改造成按需加載的單頁面.

安裝 vue-router

npm i vue-router -D

修改 webpack.config.js 配置

修改 webpack.config.js, 改造成單頁面

const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const webpack = require('webpack'); const path = require('path'); require("babel-polyfill");function resolve(dir) {return path.resolve(__dirname, dir) }module.exports = {//定義頁面的入口, 因為js中將要使用es6語法, 所以這里需要依賴 babel 墊片entry: {index: ['babel-polyfill', './src/index.js']},output: {path: resolve('dist'), // 指示發布目錄chunkFilename: 'js/[name].[chunkhash:8].js',filename: 'js/[name].[chunkhash:8].js' //指示生成的頁面入口js文件的目錄和文件名, 中間包含8位的hash值},externals: {//video.js 作為外部資源引入'video.js': 'videojs'},//下面給一些常用組件和目錄取別名, 方便在js中 importresolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.common.js','jquery$': 'admin-lte/plugins/jQuery/jquery-2.2.3.min.js','src': resolve('src'),'assets': resolve('src/assets'),'components': resolve('src/components')}},module: {//配置 webpack 加載資源的規則rules: [{test: /\.js$/,loader: 'babel-loader',include: [resolve('src')]}, {test: /\.vue$/,loader: 'vue-loader'}, {test: /\.css$/,loader: 'style-loader!css-loader'},{test: /\.less$/,loader: "less-loader"},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader?limit=10000&name=images/[name].[hash:8].[ext]'},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader?limit=10000&name=fonts/[name].[hash:8].[ext]'},{test: /\.(swf|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader?limit=10000&name=media/[name].[hash:8].[ext]'}]},plugins: [//引入全局變量new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery',"window.jQuery": 'jquery',"window.$": 'jquery'}),new webpack.DllReferencePlugin({context: __dirname,manifest: require('./dll/vendor-manifest.json')}),new CopyWebpackPlugin([{ from: 'dll', ignore: ['template.html', 'vendor-manifest.json'] }]),//編譯前先清除 dist 發布目錄new CleanWebpackPlugin(['dist']),//生成視頻廣場首頁, 在這個頁面中自動引用入口 index --> dist/js/index.[chunkhash:8].js//以 src/index.html 這個文件作為模板new HtmlWebpackPlugin({filename: 'index.html',title: '視頻廣場',inject: true, // head -> Cannot find element: #appchunks: ['index'],template: './dll/template.html',minify: {removeComments: true,collapseWhitespace: false}})] };

只保留一個 entry, 一個 HtmlWebpackPlugin
在 output 中添加 chunkFilename 屬性, 以對按需加載的 js 文件命名

新建路由文件

add src/router.js

import Vue from 'vue' import Router from 'vue-router' import AdminLTE from 'components/AdminLTE.vue'import Index from 'components/Index.vue' // import Player from 'components/Player.vue' const Player = () => import(/* webpackChunkName: 'player' */ 'components/Player.vue') const About = () => import(/* webpackChunkName: 'about' */ 'components/About.vue')Vue.use(Router);const router = new Router({routes: [{path: '/',component: AdminLTE,children: [{path: '',component: Index}, {path: 'player',component: Player}, {path: 'about',component: About}]}],linkActiveClass: 'active' })export default router;

/ –> Inex 直接加載
/player –> Player 懶加載
/about –> About 懶加載

其中, Player 和 About 兩個組件以按需加載的方式的引入, 區別于 Index, 注意文件開始部分, import 的寫法, 就是 vue-router 官方文檔中 懶加載 部分的寫法

改造入口文件

src/index.js

import Vue from 'vue' import store from 'src/store' import router from 'src/router'new Vue({el: '#app',store,router,template: `<transition><router-view></router-view></transition>` })

router-view 標簽用于占位路由指向的目標組件

修改 Sider 為路由導航

components/Sider.vue

<template><aside id="slider" class="main-sidebar"><section class="sidebar"><ul class="sidebar-menu"><router-link class="treeview" v-for="(item,index) in menus" :key="index" tag="li" :exact="item.path == '/'" :to="item.path"><a><i :class="['fa', 'fa-' + item.icon]"></i><span>{{item.text}}</span></a></router-link></ul></section></aside> </template><script> export default {props: {menus : {default : () => []}} } </script>

router-link 定義路由導航鏈接, 這里路由鏈接渲染為 li > a 的形式, 當前訪問路徑為 router-link 或者其子路由時, 該 router-link 自動觸發為激活狀態, 激活狀態的 class name 可以通過 linkActiveClass 指定, 我們在前面的創建 router 的時候, 統一將其指定為 active

如果只想讓訪問路徑嚴格匹配路由時, 觸發為激活狀態, 即子路由激活時, 父路由不激活, 需要在父路由上使用 exact 標識. 這個選項, 常用于首頁路由 /

改造 AdminLTE.vue

將原來的 slot 占位, 替換成 router-view 占位

<template><div class="wrapper"><NaviBar :logoText="logoText" :logoMiniText="logoMiniText"></NaviBar><Sider :menus="menus"></Sider><div class="content-wrapper"><section class="content"><transition><router-view @btnClick="btnClick"></router-view></transition></section></div></div> </template><script> import "font-awesome/css/font-awesome.css" import "admin-lte/bootstrap/css/bootstrap.css" import "admin-lte/dist/css/AdminLTE.css" import "admin-lte/dist/css/skins/_all-skins.css"import "admin-lte/bootstrap/js/bootstrap.js" import "admin-lte/dist/js/app.js"import { mapState } from "vuex" import Vue from 'vue'import Sider from 'components/Sider' import NaviBar from 'components/NaviBar'export default {data() {return {}},mounted() {$(() => {$.AdminLTE.layout.fix();})},components: {NaviBar, Sider},computed: {//訪問 vuex store 中的數據//此處用到 es6 stage-2 才有的三個點展開對象的語法, 對應 .babelrc 中的配置...mapState(["logoText","logoMiniText","menus"])},methods: {btnClick(msg){alert(msg);}} } </script>

運行程序, 看看效果

npm run start

如上圖所示, 當首次點擊 [HLS 播放器] 改變路由時, 從 Netwok 觀察到加載 player.xxx.js , 表明懶加載開啟成功

代碼位置: https://github.com/penggy/easydss-web-src/tree/blog_5

關于EasyDSS

EasyDSS商用流媒體服務器解決方案是一套集流媒體點播、轉碼與管理、直播、錄像、檢索、時移回看于一體的一套完整的商用流媒體服務器解決方案，EasyDSS高性能RTMP流媒體服務器支持RTMP推流，同步輸出HTTP、RTMP、HLS、HTTP-FLV，支持推流分發/拉流分發，支持秒開、GOP緩沖、錄像、檢索、回放、錄像下載、網頁管理等多種功能，是目前市面上最合理的一款商用流媒體服務器！

詳細說明：http://www.easydss.com/

點擊鏈接加入群【EasyDSS流媒體服務器】：560148162

獲取更多信息

郵件：support@easydarwin.org

WEB：www.EasyDarwin.org

Copyright ? EasyDarwin.org 2012-2017

轉載于:https://www.cnblogs.com/babosa/p/7553173.html

總結

以上是生活随笔為你收集整理的EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本...的全部內容，希望文章能夠幫你解決所遇到的問題。

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