详解如何提高 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跨页面保存变量做菜单的方法
Jan 17 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
js中document.write的那点事
Dec 12 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
详解javascript中的Error对象
Apr 25 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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/04/08 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
php实现word转html的方法
2016/01/22 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
Python生成随机MAC地址
2015/03/10 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
python中的itertools的使用详解
2020/01/13 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
集团薪酬管理制度
2014/01/13 职场文书
保健品市场营销方案
2014/03/31 职场文书
2014年党务公开方案
2014/05/08 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
硕士论文致谢范文
2015/05/14 职场文书
小学大队长竞选稿
2015/11/20 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
redis 存储对象的方法对比分析
2021/08/02 Redis
flex弹性布局详解
2022/03/20 HTML / CSS