详解基于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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
Node.js assert断言原理与用法分析
Jan 04 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
新闻分类录入、显示系统
2006/10/09 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
jquery实现吸顶导航效果
2020/01/08 jQuery
python集合用法实例分析
2015/05/30 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python requests 使用快速入门
2017/08/31 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Django models.py应用实现过程详解
2019/07/29 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
Linux操作面试题
2012/05/16 面试题
社团文化节邀请函
2014/01/10 职场文书
研修第一天随笔感言
2014/02/15 职场文书
责任心演讲稿
2014/05/14 职场文书
北京爱情故事观后感
2015/06/12 职场文书
婚庆主持词大全
2015/06/30 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书