详解使用vue-admin-template的优化历程资源-CSDN下载

5星 · 超过95%的资源 125 浏览量 2020-08-27 11:43:06 上传评论收藏 195KB PDF 举报

使用 Vue-Admin-Template 优化历程详解在本篇文章中，我们将详细介绍使用 Vue-Admin-Template 的优化历程。 Vue-Admin-Template 是一个基于 Vue.js 的后台管理系统模板，旨在提供一个快速、灵活、可扩展的解决方案。然而，在实际开发中，我们发现了许多问题，例如打包出来的文件体积非常大，影响了用户体验和开发效率。因此，本文将详细介绍如何对 Vue-Admin-Template 进行优化，提高资源加载速度和打包速度。优化目的： 1. 加快资源加载速度，减少用户等待的时间和首页白屏时间，提高用户体验。 2. 加快打包速度，不要将时间浪费在等待打包上。解决方法： 1. 使用 CDN 加速资源加载速度使用 CDN 可以快速加载资源，减少用户等待的时间和首页白屏时间。 BootCDN 是一个非常popular的 CDN 库，提供了许多热门资源，包括 Vue.js 和 Element UI。我们可以在 index.html 中引入 Vue 和 Element UI，从而提高加载速度。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-admin-template</title>  <link href="https://cdn.bootcss.com/element-ui/2.3.2/theme-chalk/index.css" rel="external nofollow" rel="stylesheet"> </head> <body> <div id="app"></div>   <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>  <script src="https://cdn.bootcss.com/element-ui/2.3.2/index.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.3.2/locale/zh-CN.min.js"></script> </body> </html> ``` 2. 配置 Webpack externals 在上一步中，我们已经使用 CDN 加速了资源加载速度，但是需要告知 Webpack 在打包时，依赖的来源。我们可以在 webpack.base.conf.js 中添加 externals 配置，如下所示： ```javascript module.exports = { ... externals: { vue: 'Vue', 'element-ui': 'ELEMENT' } } ``` 3. 使用 html-webpack-include-assets-plugin 插件在上一步中，我们已经配置了 externals，但是这会导致 Vue DevTools 无法进行调试。为了解决这个问题，我们可以使用 html-webpack-include-assets-plugin 插件，帮助我们在注入 app.js 后，再注入相对应的组件库。 ```javascript const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin') const externals = { // 因为打包时，还没注入，所以这里要去掉。 // 'element-ui': 'ELEMENT' } // 生产环境中使用生产环境的 vue // 开发环境继续使用本地 node_modules 中的 vue if (process.env.NODE_ENV === 'production') { // ... } ``` 使用 Vue-Admin-Template 可以快速搭建后台管理系统，但是需要注意优化问题。通过使用 CDN 加速资源加载速度、配置 Webpack externals 和使用 html-webpack-include-assets-plugin 插件，我们可以提高资源加载速度和打包速度，提高用户体验和开发效率。

资源推荐

资源详情

资源评论

详解使用详解使用vue-admin-template的优化历程的优化历程

主要介绍了详解使用vue-admin-template的优化历程，小编觉得挺不错的，现在分享给大家，也给大家做个参

考。一起跟随小编过来看看吧

前言前言

公司有好几个项目都有后台管理系统，为了方便开发，所以选择了 vue 中比较火的后台模板作为基础模板进行开发。但是，

开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件都十分之大，就一个 vendor 就有

770k 的体积（下图是基础模板，什么都没加打包后的文件信息）：

通过 webpack-bundle-analyzer 进行分析可得，体积主要来源于饿了么UI（体积为 500k），因为没对其进行部分引入拆分组件，

导致 webpack 把整个组件库都打包进去了。其次就是 vue 本身，体积也达到了 80k 之大。

所以，对其进行打包优化，是一件刻不容缓的事情。

优化优化

优化主要目的有：

1. 加快资源加载速度，减少用户等待的时间和首页白屏时间，提高用户体验。

2. 加快打包速度，不要将时间浪费在等待打包上。

解决第一个问题，很多人都会想到资源文件放在 CDN 上就好了，没错，这次我们就是通过 CDN 来解决加载问题。

CDN - 提高加载速度提高加载速度

像 vue， element ui 这些比较成熟的框架/组件库，一般都有免费、高速、公共的 cdn 供开发者使用，鉴于大部分用户均在国

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论收藏

内容反馈

余青葭

2023-07-25

这篇文章详细介绍了使用vue-admin-template的优化过程，通过实例展示了具体操作方法，对于初次接触的人来说非常实用。
雨后的印

2023-07-25

这篇文章内容充实，涵盖了很多优化相关的知识点，读者能够从中学到很多实用的技巧和方法。
林书尼

2023-07-25

文章结构清晰，逻辑连贯，读起来很舒服，不会让人产生困惑感。
仙夜子

2023-07-25

作者在文章中提到了一些常见优化问题，并给出了相应解决方案，对于遇到同样问题的读者来说是很有帮助的。
稚气筱筱

2023-07-25

作者分享了自己的实践经验，指导读者如何在实际项目中进行优化，让人感觉作者有很丰富的实际经验。