Webpack性能优化 DLL 用法详解


Posted in Javascript onAugust 10, 2017

前言

在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,我们希望能和自己的代码分离开,Webpack 社区有两种方案

  • CommonsChunkPlugin
  • DLLPlugin

对于 CommonsChunkPlugin,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,能把第三方库和我们自己的代码分开。而DLLPlugin 则是能把第三方代码完全分离开,即每次只打包项目自身的代码。

用法

要使用 DLLPlugin,需要额外新建一个配置文件。所以对于用这种方式打包的项目,一般会有下面两个配置文件

  • webpack.config.js
  • webpack.dll.config.js

先来看下 webpack.dll.config.js

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
 vendors: ['react', 'lodash']
 },

 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

再改下 webpack.config.js 文件

const webpack = require('webpack')

module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 })
 ]
}

manifest: require('./dist/vendors-manifest.json') 这里的路径要和 webpack.dll.config.js 里面的对应。

然后运行

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

然后你的 html 文件像下面这样引用

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

DLL Link Plugin

上面的用法也存在一些不方便的地方,比如在 webpack.config.js 中要明确指出对应的 manifest.json 文件。还有当 DLL 需要更新的时候,比如 react 升级了,或者加入新的第三方库,都需要手动像下面这样编译一次。

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

因为上面这些问题,所以基于官方的 DllReferencePlugin,我写了一个打包的插件,Dll Link Plugin。

使用这个插件,只需要对 webpack.config.js 作下小小的改动

const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')

module.exports = {
 // ...
 plugins: [
 new DllLinkPlugin({
  config: require('webpack.dll.config.js')
 })
 ]
}

直接替换掉 DllReferencePlugin,然后传入对应的 DLL 配置文件就可以了。每次打包的时候,只需要运行

$ webpack --config webpack.config.js

上面的命令便会自动生成对应的 vendors 文件,需要更新的时候,也会自动更新。

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

Javascript 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
详解React Native网络请求fetch简单封装
Aug 10 #Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 #Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
express框架实现基于Websocket建立的简易聊天室
Aug 10 #Javascript
bootstrap table服务端实现分页效果
Aug 10 #Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 #Javascript
You might like
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP7.0版本备注
2015/07/23 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
高考自主招生自荐信
2013/10/20 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
学校教学管理制度
2015/08/06 职场文书
护士工作心得体会
2016/01/25 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
如何理解及使用Python闭包
2021/06/01 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android