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
感谢你的浏览，希望能有所帮助。
webpack性能优化——DLL的更多相关文章
- webpack 性能优化 dll 分包
webpack 性能优化 dll 分包 html-webpack-externals-plugin DLLPlugin https://www.webpackjs.com/configuration/ ...
- webpack 性能优化小结
背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了gru ...
- webpack性能优化
Webpack优化打包速度以及性能优化 1.跟上技术的迭代(Node.Npm.Yarn) 2.在尽可能少的模块上应用loader 3.Plugin尽可能精简并确保可靠 4.resolve参数合理配置 ...
- Webpack 性能优化 （一）（使用别名做重定向）
前言 Webpack 是 OneAPM 前端技术栈中非常重要的一部分.它非常好用,假设你还不了解它,建议你阅读这篇Webpack 入门指迷,在 OneAPM 我们用它完毕静态资源打包.ES6 代码的转 ...
- webpack 性能优化 -- 待续
文章 这篇文章挺不错的, 各方面优化都提到了, 有空研究下 文章 这个文章提出 , 增量打包用 webpack-watch 会让你打包速度飞快, react不参与打包, 不require, 而是放在 ...
- webpack性能优化-实战
题外话:年初项目重构上线,项目技术栈使用vue+webpack,测试执行整个打包流程需要10分钟,同时又因涉及三个渠道,部署好环境就需半个小时,这严重延误了上线进度,因此提高webpack构建效率,成 ...
- webpack打包优化点
目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking ...
- 浅谈webpack4.0 性能优化（转）
前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...
- 【前端构建】WebPack实例与前端性能优化
计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...
随机推荐
- UVa 10718 - Bit Mask
题目大意:给一数N,在区间[L, U]上找到一个数M使得M| N的值最大,如果有M有多个可能值,取最小的那个值. 从最高位开始逐位判断,如果N的该位为0,为使M | N的值最大,M的该位应考虑置为1, ...
- MindManager 安装注册
正版现在998元,对于个人用户来说是不是太贵了.直接下载的还不能打开,挺奇怪.
- YII 1.0模型标签与验证规则，前后台验证
model Admin.php model(),tabName()是固定格式 <?php /* 管理员模型 * ----------------------------------------- ...
- webx--petstore
配置对应环境,运行petstore 通过官网给的命令行方法,来运行petstore petstore是java ee的经典学习案例,下载链接 如何运行呢? 参见官网给的指导:webx官网 git cl ...
- 如何使用HTTPS防止流量劫持
何为流量劫持 前不久小米等六家互联网公司发表联合声明,呼吁运营商打击流量劫持.流量劫持最直观的表现,就是网页上被插入了一些乱七八糟的广告/弹窗之类的内容.比如这样: 网页右下角被插入了游戏的广告. 流 ...
- angular2教程
https://github.com/lewis617/angular2-tutorial
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- MySQL删除单列重复或多列同时重复值并保留一条
在生产环境中,我们有的列是不允许出现重复值的,亦或是某两列不允许同时重复,但由于前端未做限制,或者没限制住,出现了单列重复值,或者两列本应组成唯一组合却也出现重复,这两种情况都是不允许的.现在由于前端 ...
- 解析STL中典型的内存分配
1 vector 在C++中使用vector应该是非常频繁的,但是你是否知道vector在计算内存分配是如何么? 在c++中vector是非常类似数组,但是他比数组更加灵活,这就表现在他的大小是可以自 ...
- Java泛型类型擦除导致的类型转换问题
初步结论:泛型类型转换不靠谱: 源码: package com.srie.testjava; public class TestClassDefine4<T> { public stati ...