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


Posted in Javascript onMay 20, 2018

前言

公司有好几个项目都有后台管理系统,为了方便开发,所以选择了 vue 中比较火的后台模板 作为基础模板进行开发。但是,开始用的时候,作者并没有对此进行优化,到项目上线的时候,才发现,打包出来的文件都十分之大,就一个 vendor 就有 770k 的体积(下图是基础模板,什么都没加打包后的文件信息):

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

通过 webpack-bundle-analyzer 进行分析可得,体积主要来源于饿了么UI(体积为 500k),因为没对其进行部分引入拆分组件,导致 webpack 把整个组件库都打包进去了。其次就是 vue 本身,体积也达到了 80k 之大。

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

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

优化

优化主要目的有:

  1. 加快资源加载速度,减少用户等待的时间和首页白屏时间,提高用户体验。
  2. 加快打包速度,不要将时间浪费在等待打包上。

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

CDN - 提高加载速度

像 vue, element ui 这些比较成熟的框架/组件库,一般都有免费、高速、公共的 cdn 供开发者使用,鉴于大部分用户均在国内,所以这次使用了 bootcdn 这个库。该库热门资源比较齐全,各个版本都有,而且国内访问速度很快,简直是开发者的福音。

index.html 中引入 vue 和 饿了么组件。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-admin-template</title>
  <!-- 同时也要引入对应版本的 css -->
  <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>
  <!-- built files will be auto injected -->
  <!-- 先引入 Vue -->
  <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>

因为依赖是从外部引入的,所以需要告知 webpack 在打包时,依赖的来源。

修改 webpack.base.conf.js

module.exports = {
 ...
 externals: {
  vue: 'Vue',
  'element-ui':'ELEMENT'
 }
}

再一次打包,确实能极大的压缩了打包的体积,从 700k 骤减至 130k:

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

但是随之而来的就有问题了:

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

明明我在本地开发,但是由于引入了线上的生产版本的 vue 文件,因此 vue-dev-tools 就不能进行调试。

因此,我们需要再次调整一下 webpack 的配置,webpack.base.conf.js,而且 webpack 注入的 js 总是在最后面的,因此,我们需要 html-webpack-include-assets-plugin 帮忙在注入 app.js 后,再注入相对应的组件库 :

const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')

const externals = {
 // 因为打包时,还没注入,所以这里要去掉。
 // 'element-ui':'ELEMENT'
}
// 生产环境中使用生产环境的 vue
// 开发环境继续使用本地 node_modules 中的 vue
if (process.env.NODE_ENV === 'production') {
 externals['vue'] = 'Vue'
 // 如发现打包时依旧将 element-ui 打包进入 vendor,可以在打包时将其加入外部依赖。
 externals['element-ui'] = 'ELEMENT'
}
// 生产环境默认注入 vue 
// 开发环境中不注入
const defaultJS = process.env.NODE_ENV === 'production' ? [{ path: 'https://cdn.bootcss.com/vue/2.4.2/vue.min.js', type: 'js' }] : []
const plugins = [
 new HtmlWebpackIncludeAssetsPlugin({
   assets: defaultJS.concat([
    { path: 'https://cdn.bootcss.com/element-ui/2.3.2/index.js', type: 'js' },
    { path: 'https://cdn.bootcss.com/element-ui/2.3.2/locale/zh-CN.min.js', type: 'js' },
   ]),
   // 是否在 webpack 注入的 js 文件后新增?true 为 append, false 为 prepend。
   // 生产环境中,这些 js 应该先加载。
   append: process.env.NODE_ENV !== 'production',
   publicPath: '',
  })
]

module.exports = {
 ...
 externals,
 plugins,
 ...
}

OK,这时候,既能兼顾打包后的体积大小,也能在开发模式中使用 vue-dev-tool 进行调试。

DLL - 提高打包速度

经常打包的前端会发现,很多时候,我们为了修复某些bug(如 promise 在 ie Safari 下的 bug),而新引入了一个 polyfill,然而,打包完后发现,vendor 的 hash 值变了,而整个 vendor 只新加了一个 es6-promise 的依赖,但是付出的代价就是,需要抛弃之前打包好的 vendor,用户重新访问时,需要再一次拉取一个全新的 vendor,这个代价就有点大了。

这时候,使用 dllPlugin 打包就有优势了。它可以将一些基础依赖模块统一先打包起来,当正式打包时,则可以略过这些模块,不再重复打包进去 vendor,提高打包速度的同时也能减少 vendor 的体积。

如,后台管理系统基础模块基本有以下几个:

  1. axios: ajax 请求。
  2. vuex: 全局状态管理。
  3. js-cookie: 前端处理 cookie
  4. vue-router: 路由管理。

这四个基础模块几乎是必须的,那么可以先提取出来。

step 1 打包基础模块

先在 build 文件夹下新建一个用于打包 dll 的配置文件 webpack.dll.conf.js

const webpack = require('webpack');
const path = require('path');
const vueLoaderConfig = require('./vue-loader.conf')
const utils = require('./utils')
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

const vendor = [
  // 'vue/dist/vue.runtime.esm.js', // 由于 vue 在生产环境中使用的是 cdn 引入,所以也无需提前打包进 dll
  // 'raven-js', // 前端监控,若无此需求,可以忽略。
  'es6-promise', // 修复 promise 中某些 bug。
  'vue-router',
  'js-cookie',
  'axios',
  'vuex',
];

const webpackConfig = {
  context: __dirname,
  output: {
    path: path.join(__dirname, '../static/js/'),
    filename: '[name].dll.js',
    library: '[name]_[hash]',
  },
  entry: {
    vendor
  },
  plugins: [
    new webpack.DllPlugin({
      context: __dirname,
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_[hash]',
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
       warnings: false
      },
      sourceMap: true,
      // parallel: true
    })
  ],
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
};
module.exports = webpackConfig

然后在 package.json 中加入一条命令:

{
  "scripts": {
    ...
    "build:dll": "webpack --config build/webpack.dll.conf.js",
    ...
  }
}

执行 yarn build:dll 或者 npm run build:dll 即可完成打包 dll。执行完成后:

yarn build:dll
yarn run v1.5.1
$ webpack --config build/webpack.dll.conf.js
Hash: f6894dff019b2e0734af
Version: webpack 3.10.0
Time: 1295ms
     Asset   Size Chunks       Chunk Names
vendor.dll.js 62.6 kB    0 [emitted] vendor
  [8] dll vendor 12 bytes {0} [built]
  + 32 hidden modules
✨ Done in 1.89s.

同时,可以在 build 目录下,找到各个模块对应关系文件 vendors-manifest.jsonstatic/js 下的 vendor.dll.js

step 2 页面中引入 vendor

打包后的 dll 文件需要手动在 index.html 引入:

<div id="app"></div>
<!-- built files will be auto injected -->
<script src="static/js/vendors.dll.js"></script>

step 3 告诉 webpack 使用 dllPlugin 进行打包

修改 build/webpack.prod.conf.js:

module.exports = {
  plugins: [
    ...
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    }),
    ...
  ]
}

再次打包:

$ yarn build:report
yarn run v1.5.1
$ npm_config_report=true node build/build.js
Hash: b4ff51852866ed865cfd
Version: webpack 3.10.0
Time: 6532ms
                       Asset    Size Chunks       Chunk Names
     static/js/manifest.42b9584a653aec2b9c5e.js   1.5 kB    5 [emitted] manifest
             static/img/404.a57b6f3.png  98.1 kB     [emitted]
        static/js/1.9e4133a25808e2101dd3.js    1 kB    1 [emitted]
        static/js/2.2a8a8e01c51473fab882.js  4.34 kB    2 [emitted]
      static/js/vendor.c7b076ef3341d4711402.js  39.4 kB    3 [emitted] vendor
       static/js/app.6d52c7a5bf1bacb5cc85.js  21.4 kB    4 [emitted] app
        static/js/0.cbc645864aab28ae8055.js  15.3 kB    0 [emitted]
static/css/app.1b30f8eba210e245a5f96d7bf0d6fb6c.css   7.6 kB    4 [emitted] app
                    favicon.ico  67.6 kB     [emitted]
                     index.html 986 bytes     [emitted]
              static/js/vendor.dll.js  62.6 kB     [emitted]

 Build complete.

 Tip: built files are meant to be served over an HTTP server.
 Opening index.html over file:// won't work.

发现 vendor 现在只有 40k 的体积,减少了一半的体积,而且打包速度也快了 2s,而相对于最开始的基础模板,打包速度快了 12s,这是很让人欣慰。

后记

使用了 cdn 和 dll 打包后,无论是打包速度还是页面加载的速度都有很大的提升。因此将此次优化记录下来,并传上了 GitHub 中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
vuex进阶知识点巩固
May 20 #Javascript
简单的三步vuex入门
May 20 #Javascript
vue项目如何刷新当前页面的方法
May 18 #Javascript
原生JS实现的碰撞检测功能示例
May 18 #Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 #Javascript
vue.js使用3DES加密的方法示例
May 18 #Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 #Javascript
You might like
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
深入理解Python中装饰器的用法
2016/06/28 Python
python reduce 函数使用详解
2017/12/05 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python reversed函数及使用方法解析
2020/03/17 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
什么是python的自省
2020/06/21 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
网络技术专业求职信
2014/05/02 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
我的收音机情缘
2022/04/05 无线电