详解如何提高 webpack 构建 Vue 项目的速度


Posted in Javascript onJuly 03, 2017

前言

最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了。在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间。所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间。那么要怎么去实现呢?

解决方案

DllPlugin 和 DllReferencePlugin

查找了一下资料,发现我们可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实现我们要的功能。

DllPlugin 可以把我们需要打包的第三方库打包成一个 js 文件和一个 json 文件,这个 json 文件中会映射每个打包的模块地址和 id,DllReferencePlugin 通过读取这个json文件来使用打包的这些模块。

接下来就看如何实现。

配置文件

在 build 文件夹中新建 webpack.dll.config.js (项目基于 vue-cli 的)

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: {
  vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios','vue-echarts-v3']
 },
 output: {
  path: path.join(__dirname, '../static/js'),
  filename: '[name].dll.js',
  library: '[name]_library'    // vendor.dll.js中暴露出的全局变量名
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library'
  }),
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
};

然后在 package.json 中配置命令

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

执行 npm run build:dll 命令来生成 vendor.dll.js 和 vendor-manifest.json

需要在 index.html 引入 vendor.dll.js

<body>
  <div id="app"></div>
  <script src="./static/js/vendor.dll.js"></script>
</body>

vendor-manifest.json 的内容大概如下:

{
 "name": "vendor_library",
 "content": {
  "./node_modules/core-js/modules/_export.js": {
   "id": 0,
   "meta": {}
  },
  ...
}

接下来就在 webpack.base.config.js 中通过 DLLReferencePlugin 来使用 DllPlugin 生成的 DLL Bundle

var webpack = require('webpack');

module.exports = {
  entry: {
    app: ['./src/main.js']
  },
  module: {
    ...
  }
  // 添加DllReferencePlugin插件
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vendor-manifest.json')
    }),
  ]
}

原先 build 需要 95446ms,配置之后执行 build 只需 14360ms,减少了 75% 的时间。

但是存在一个问题,当把太多的第三方依赖都打包到 vendor.dll.js 中去,该文件太大也会影响首屏加载时间。所以要权衡利弊,可以异步加载的插件就没有必要打包进来了,不要一味的把所有都打包到这里面来获取构建时的快感。

示例地址:vue-manage-system

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

Javascript 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
js分页代码分享
Apr 28 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 #Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 #Javascript
JavaScript生成图形验证码
Aug 24 #Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 #Javascript
mac上node.js环境的安装测试
Jul 03 #Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 #Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 #Javascript
You might like
php中目录,文件操作详谈
2007/03/19 PHP
php 执行系统命令的方法
2009/07/07 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
Python 3中print函数的使用方法总结
2017/08/08 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
python实现键盘输入的实操方法
2019/07/16 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
写自荐信的注意事项
2014/03/09 职场文书
个人工作表现评语
2014/04/30 职场文书
租房协议书
2014/09/12 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
公务员年终个人总结
2015/02/12 职场文书
社区重阳节活动总结
2015/03/24 职场文书
2016新年问候语大全
2015/11/11 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫