详解webpack性能优化——DLL
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 进行项目打包。
可以看到打包在 Dll 文件中的文件都被 delegated(委派) ,而不是直接打进 bundle 文件中。
这样我们就将所有的资源完成打包,生成的 dist 目录如下:
不过 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
内容如下:
<!-- .... --> <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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 使用 Referer Meta 标签控制 referer—详解 referrer-policy
- 网站抓取引子 - 获得网页中的表格
- Android Firebase 服务简介
- CVE-2015-0393:Oracle发布严重安全漏洞预警
- 研究人员发现一种利用Siri窃取苹果iPhone/iPad数据的方法
- 关于Python中的__main__和编程模板
- 世界大战尽在掌控:盘点全球网络攻击实时追踪系统
- Activity数据传递
- apache反向代理一、泛解析域名二、APACHE配置
- Python学习 - 可视化变量赋值、循环、程序运行过程
- jdk源码分析红黑树——插入篇1.插入root2.父黑3.父红4.父红,叔红5.1父红,叔黑,外侧子孙5.2父红,叔黑,内侧子孙
- WIFI环境下Android手机和电脑通信
- 破解之美:利用ECB加密缺陷突破cookie加密
- 让Python猜猜你是否能约会成功
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【新手宝典】一篇博文带萌新建站并了解建站体系流程和对萌新友好的便捷方式,这篇博文很有可能是你的启蒙文
- 一种不需要敲代码的Python 画图方法
- 【一】Windows API 零门槛编程指南——MessageBox 基本使用及基础讲解
- 【二】Windows API 零门槛编程指南——CreateWindow 窗口创建 “万字长篇专业术语全解”
- 「零门槛多语言 Python/C/C# 通用思想学习系列」第一篇:经典HelloWorld
- 直播系统定制,判断数据连接是否可用
- VS Code 编辑器入门指南上篇-核心概念与组件
- Python turtle库实现基本剖析
- python thinker canvas create_arc 使用详解
- Python3 实现单例设计模式
- Python3 实现建造者模式
- python 实现原型设计模式
- python 最简单的实现适配器设计模式
- python3 最基本且简单的实现组合设计模式
- python 实现装饰器设计模式