详解webpack性能优化——DLL


Posted in Javascript onOctober 20, 2017

Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式。

在通常的打包过程中,你所引用的诸如:jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等众多库也会被打包进 bundle 文件中。由于这些库的内容基本不会发生改变,每次打包加入它们无疑是一种巨大的性能浪费。

Dll 的技术就是在第一次时将所有引入的库打包成一个 dll.js 的文件,将自己编写的内容打包为 bundle.js 文件,这样之后的打包只用处理 bundle 部分。

以一个 Vue 项目为例,首先创建一个名为 webpack.dll.config.js 的文件

var path = require("path"),
fs = require('fs'),

webpack = require("webpack");

var vendors = [

'vue', 

'vue-router', 

'vuex'
];

module.exports = {

entry: {


vendor: vendors

},

output: {


path: path.join(__dirname, "dist"),


filename: "Dll.js",


library: "[name]_[hash]"

},

plugins: [


new webpack.DllPlugin({



path: path.join(__dirname, "dist", "manifest.json"),



name: "[name]_[hash]",



context: __dirname


})

]
};

这个文件的作用是将 vue、vue-router 以及 vuex 合并打包为一个名为 Dll.js 的静态资源包,同时生成一个 manifest.json 文件方便对 Dll.js 中的模块进行引用。

要注意的是,执行 webpack 命令是默认执行该目录下名为 webpack.config.js 或者 webpackfile.js 的文件。所以需要通过 --config 指令手动指定该文件,最后加入 -p 指令将 Dll.js 压缩。

$ webpack --config webpack.dll.config.js -p

这样,在项目根目录下就会多增加一个 dist 文件夹,其中有压缩之后的 Dll.js 与 manifest.json 文件。

manifest.json 文件内容如下,给各个模块赋予 id 以便引用。

{
 "name": "vendor_2beb750db72b1cda4321",
 "content": {
  "./node_modules/process/browser.js": {
   "id": 0,
   "meta": {}
  },
  "./node_modules/vue-router/dist/vue-router.esm.js": {
   "id": 1,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
  "./node_modules/vue/dist/vue.runtime.esm.js": {
   "id": 2,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
//.......

最后在 webpack.config.js 中添加引用。在 plugins 属性中添加 DllReferencePlugin 插件,并指明 manifest.json 文件的引用路径。

//...
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./dist/manifest.json')
  })
]

在确保成功执行 webpack.dll.config.js 文件后,执行 webpack -p 进行项目打包。

详解webpack性能优化——DLL

可以看到打包在 Dll 文件中的文件都被 delegated(委派) ,而不是直接打进 bundle 文件中。

这样我们就将所有的资源完成打包,生成的 dist 目录如下:

详解webpack性能优化——DLL

不过 dist 文件夹要想作为一个完整的工程还少一个 html 文件,我创建了一个名为 pack.js 的文件,使用 nodejs 的 fileSystem 对 html 文件进行修改并拷贝。

pack.js

var fs = require('fs');

fs.readFile('./index.html', 'utf8', (err, data) => {
  if (!err) {
    var dataStr = data.toString(),
    timestamp = (new Date()).getTime();
  
    dataStr = dataStr
          .replace('bundle.js', 'bundle.js?v='+timestamp)
          .replace('<!-- dll -->', '<script src="./dist/Dll.js?v='+ timestamp +'"></script>');

    fs.writeFile('./dist/index.html', dataStr, (error) => {
      if (!error) {
        console.log('HTML file copy successfully');
      } else {
        console.log(error);
      }
    });
  } else {
    console.log(err);
  }
});

我们需要在模块的入口 html 中添加 <!-- dll --> 的占位字符,pack.js 的作用就是将 html 文件拷贝一份到 dist 目录下,同时将 <!-- dll --> 替换为引用 Dll.js 的 script 标签,并在引用文件后添加时间戳。

<!-- .... -->
<body>
<div id="demo" class="container"></div>

<!-- dll -->
<script src="./bundle.js"></script>
</body>
</html>

在执行 webpack -p 打包后,输入下面命令运行 pack.js,就会在 dist 目录下生成 html 文件。

$ node pack.js

详解webpack性能优化——DLL

内容如下:

<!-- .... -->
<body>
<div id="demo" class="container"></div>

<script src="./dist/Dll.js?v=1488250309725"></script>
<script src="./bundle.js?v=1488250309725"></script>
</body>
</html>

这样 dist 文件夹就作为一个完整的、不需要任何手动操作、已经压缩混淆后的项目可以直接进行线上的部署。

实际项目模板参考地址如下。由于笔者作为 React 与 Vue 的双持开发者,所以创建了两个模板,以便之后通过 yomen(yo) 之类的进行脚手架工具化。

https://github.com/Darylxyx/generator-yx-react

https://github.com/Darylxyx/generator-yx-vue

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

Javascript 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 #Javascript
浅谈如何使用 webpack 优化资源
Oct 20 #Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
Js利用prototype自定义数组方法示例
Oct 20 #Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 #Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 #Javascript
You might like
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python xlwt模块使用代码实例
2020/06/10 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
人资专员岗位职责
2014/04/04 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
一年级学生评语大全
2014/04/21 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
2016公司年会通知范文
2015/04/25 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
素质教育学习心得体会
2016/01/19 职场文书
学校团代会开幕词
2016/03/04 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
MySQL日期时间函数知识汇总
2022/03/17 MySQL
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python