详解基于DllPlugin和DllReferencePlugin的webpack构建优化


Posted in Javascript onJune 28, 2018

一个基于vue-cli webpack2模板创建的项目.项目中使用到了vue+vue-router+axios+muse-ui+iview
现在构建一次需要的时间大概是40s左右.真心受不了.虽然在开发过程中,我们不太需要关心构建时间.但是如果在开发hybridApp时,构建的次数就会增多.

一般我们可以把项目分为三部分.

分类 说明 变动频率
vendor_library 核心库
vendor 一般项目依赖 中等
code 业务逻辑

vendor_library:比如vue,vue-router,axios 这些变动频率极低的文件可以利用 DllPlugin 和 DllReferencePlugin 进行预编译.

vendor,code在开发阶段,每次构建都需要编译.但是一旦完成该次开发任务,应该调整vendor 是否加入vendor_library.

BundleAnalyzerPlugin 的插件使用

BundleAnalyzerPlugin 是分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者的插件。

详解基于DllPlugin和DllReferencePlugin的webpack构建优化

vue已经默认集成了该插件. 如果你运行 npm run build ?report.就能看到当前项目的依赖情况.然后做出相应调整.

优化方向

按需加载

muse-ui,iview 都提供了按需加载的方式,按照文档调整即可.

分类 耗时 muse-ui iview
before 13256ms 234KB 337KB
after 43211ms 79KB 75KB

先看结果...你没看错,'优化后',时间竟然变长了...?.不过这也正常,之前的依赖直接获取的是dist目录的文件,现在需要在src目录下获取.增加了编译的过程.

但是文件大小的减少还是喜人的.当然,这取决于项目中对模块的使用程度.在我们这个项目中iview只使用了的四个控件.结果上看,显然还是按需加载比较划算.不过这个不算是时间上的优化,只是因为dll可以解决构建时间问题,使按需加载变的更好用.

DllPlugin 和 DllReferencePlugin 预编译资源模块

Dll这个概念应该是借鉴了Windows系统的dll。一个dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的app引用的。

打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。

这么一来有几个好处:

Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。

App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。

假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个dll。

网上抄的… 其实意思就是我们可以把项目的公共模块,基本不会改动的模块.想我们刚才说的定义为vendor_library的内容,进行预编译编译.以后在项目构建过程中,vendor_library部分直接引用,就不需要再编译了.

这也是为什么按需加载可以得到更好的使用,正常构建流程,因为使用了按需加载,会导致每次的构建都比使用全量加载用时要长.而使用dll,核心库只需要编译一次,以后直接引用即可.

先来看一下改进结果:

分类 耗时
before 57192ms
after 7890ms

哈哈,有没有快到飞起!!!

DllPlugin 和 DllReferencePlugin 使用

新建webpack.dll.conf.js文件

//webpack.dll.conf.js
process.env.NODE_ENV = 'production'
const path = require('path');
var utils = require('./utils')
var vueLoaderConfig = require('./vue-loader.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const webpack = require('webpack');
//vue项目默认有一个static目录.我就把导出目录放在了static/dll/目录下
const srcPath = path.join(__dirname, '../static/dll/');
//需要编译的模块
const vendors = ['vue/dist/vue.esm.js',
  'vue-router',
  'vue-localstorage',
  'material-design-icons/iconfont/material-icons.css',
  'iview/dist/styles/iview.css',
  'iview/src/components/tag/tag.vue'
  'muse-ui/src/appBar'
];
webpackConfig = {
  entry: {
    vendor: vendors
  },
  resolve: {
    extensions: ['.js', '.vue', '.json']
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /iview.src.*?js$/,
        loader: 'babel-loader'
      },
      {
        test: /muse-ui.src.*?js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: "css-loader"
        })
      },
      {
        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          publicPath: './',
          limit: 1000,
          name: 'fonts/[name].[ext]'
        }
      }]
  },
  output: {
    path: srcPath, // 输出的路径
    filename: '[name].dll.js', // 输出的文件,将会根据entry命名为vendor.dll.js
    library: '[name]_library' // 暴露出的全局变量名
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].dll.css'
    }),
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    new webpack.optimize.UglifyJsPlugin({ // uglifjs压缩
      compress: {
        warnings: false
      }
    }),
    new webpack.DllPlugin({
      path: path.join(srcPath, '[name]-mainfest.json'), // 描述依赖对应关系的json文件
      name: '[name]_library',
      context: __dirname // 执行的上下文环境,对之后DllReferencePlugin有用
    })
  ]
}
if (process.env.npm_config_report) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig;

其实这就是一个正常的构建文件.根据你的项目进行修改即可.唯一不同的是在plugins多了一个DllPlugin.他会生成一个描述依赖对应关系的json文件.

static目录如下:

|____dll
| |____fonts
| |____vendor-mainfest.json
| |____vendor.dll.css
| |____vendor.dll.js

修改模板index.html 根据你的构建结果做修改.

//head 标签
<link type="text/css" rel="stylesheet" href="./static/dll/vendor.dll.css" rel="external nofollow" >
//body 标签
<script src="./static/dll/vendor.dll.js"></script>

修改webpack.base.conf.js

plugins: [
    ...,
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('../static/dll/vendor-mainfest.json') // 指向生成的json文件
    })
  ]

执行

webpack --config ./build/webpack.dll.conf.js

你也可以将该语句放入npm run 中.'build:dll:report' 是为了优化dll依赖关系,添加的另外一条命令.上文已经提过,我们可以借用BundleAnalyzerPlugin插件查看当前包的依赖情况,和包体组成情况.

//package.json
"scripts":{
  "build:dll": "webpack --config ./build/webpack.dll.conf.js",
  "build:dll:report": "npm run build:dll --report"
}

npm run build …看看这次的构建时间吧 

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

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
完整显示当前日期和时间的JS代码
Sep 17 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
Node.js模块加载详解
Aug 16 Javascript
DOM 事件流详解
Jan 20 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 #Javascript
详解ES6中的三种异步解决方案
Jun 28 #Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 #Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 #Javascript
vue如何引入sass全局变量
Jun 28 #Javascript
小程序实现带年月选取效果的日历
Jun 27 #Javascript
浅谈Angular6的服务和依赖注入
Jun 27 #Javascript
You might like
PHP 程序员应该使用的10个组件
2009/10/31 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
Python代码的打包与发布详解
2014/07/30 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
python创建n行m列数组示例
2019/12/02 Python
python实现在一个画布上画多个子图
2020/01/19 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
年度考核自我鉴定
2014/02/02 职场文书
小班幼儿评语大全
2014/04/30 职场文书
升职自荐信范文
2015/03/27 职场文书
资产移交协议书
2016/03/24 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书