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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
layui数据表格重载实现往后台传参
Nov 15 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
详解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中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php session安全问题分析
2011/06/24 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP单链表的实现代码
2016/07/05 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
数控技术专业推荐信
2013/11/01 职场文书
演讲稿开场白
2014/01/13 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
销售目标责任书
2014/07/23 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
政风行风整改方案
2014/10/25 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
mysql事务隔离级别详情
2021/10/24 MySQL
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android