python 音速_webpack多页应用架构系列(十一):预打包Dll,实现webpack音速编译
前言
上文说到我们利用webpack来打包一个可配置的bootstrap,但文末留下一个问题:由于bootstrap十分庞大,因此每次编译都要耗费大部分的时间在打包bootstrap这一块,而换来的仅仅是配置的便利,十分不划算。
我也并非是故意卖关子,这的确是我自己开发中碰到的问题,而在撰写完该文后,我立即着手探索解决之道。终于,发现了webpack这一大杀器:DllPlugin&DllReferencePlugin,打包时间过长的问题得到完美解决。
解决方案的机制和原理
DllPlugin&DllReferencePlugin这一方案,实际上也是属于代码分割的范畴,但与CommonsChunkPlugin不一样的是,它不仅仅是把公用代码提取出来放到一个独立的文件供不同的页面来使用,它更重要的一点是:把公用代码和它的使用者(业务代码)从编译这一步就分离出来,换句话说,我们可以分别来编译公用代码和业务代码了。这有什么好处呢?很简单,业务代码常改,而公用代码不常改,那么,我们在日常修改业务代码的过程中,就可以省出编译公用代码那一部分所耗费的时间了(是不是马上就联想到坑爹的bootstrap了呢)。
整个过程大概是这样的:
利用DllPlugin把公用代码打包成一个“Dll文件”(其实本质上还是js,只是套用概念而已);除了Dll文件外,DllPlugin还会生成一个manifest.json文件作为公用代码的索引供DllReferencePlugin使用。
在业务代码的webpack配置文件中配置好DllReferencePlugin并进行编译,达到利用DllReferencePlugin让业务代码和Dll文件实现关联的目的。
在各个页面
中,先加载Dll文件,再加载业务代码文件。
适用范围
Dll文件里只适合放置不常改动的代码,比如说第三方库(谁也不会有事无事就升级一下第三方库吧),尤其是本身就庞大或者依赖众多的库。如果你自己整理了一套成熟的框架,开发项目时只需要在上面添砖加瓦的,那么也可以把这套框架也打包进Dll文件里,甚至可以做到多个项目共用这一份Dll文件。
如何配置哪些代码需要打包进Dll文件?
我们需要专门为Dll文件建一份webpack配置文件,不能与业务代码共用同一份配置:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const dirVars = require('./webpack-config/base/dir-vars.config.js'); // 与业务代码共用同一份路径的配置表
module.exports = {
output: {
path: dirVars.dllDir,
filename: '[name].js',
library: '[name]', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与DllPlugin的name参数保持一致
},
entry: {
/*
指定需要打包的js模块
或是css/less/图片/字体文件等资源,但注意要在module参数配置好相应的loader
*/
dll: [
'jquery', '!!bootstrap-webpack!bootstrapConfig',
'metisMenu/metisMenu.min', 'metisMenu/metisMenu.min.css',
],
},
plugins: [
new webpack.DllPlugin({
path: 'manifest.json', // 本Dll文件中各模块的索引,供DllReferencePlugin读取使用
name: '[name]', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与参数output.library保持一致
context: dirVars.staticRootDir, // 指定一个路径作为上下文环境,需要与DllReferencePlugin的context参数保持一致,建议统一设置为项目根目录
}),
/* 跟业务代码一样,该兼容的还是得兼容 */
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
}),
new ExtractTextPlugin('[name].css'), // 打包css/less的时候会用到ExtractTextPlugin
],
module: require('./webpack-config/module.config.js'), // 沿用业务代码的module配置
resolve: require('./webpack-config/resolve.config.js'), // 沿用业务代码的resolve配置
};
如何编译Dll文件?
编译Dll文件的代码实际上跟编译业务代码是一样的,记得利用--config指定上述专供Dll使用的webpack配置文件就好了:
$ webpack --progress --colors --config ./webpack-dll.config.js
另外,建议可以把该语句写到npm scripts里,好记一点哈。
如何让业务代码关联Dll文件?
我们需要在供编译业务代码的webpack配置文件里设好DllReferencePlugin的配置项:
new webpack.DllReferencePlugin({
context: dirVars.staticRootDir, // 指定一个路径作为上下文环境,需要与DllPlugin的context参数保持一致,建议统一设置为项目根目录
manifest: require('../../manifest.json'), // 指定manifest.json
name: 'dll', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与DllPlugin的name参数保持一致
});
配置好DllReferencePlugin了以后,正常编译业务代码即可。不过要注意,必须要先编译Dll并生成manifest.json后再编译业务代码;而以后每次修改Dll并重新编译后,也要重新编译一下业务代码。
如何在业务代码里使用Dll文件打包的module/资源?
不需要刻意做些什么,该怎么require就怎么require,webpack都会帮你处理好的了。
如何整合Dll?
在每个页面里,都要按这个顺序来加载js文件:Dll文件 => CommonsChunkPlugin生成的公用chunk文件(如果没用CommonsChunkPlugin那就忽略啦) => 页面本身的入口文件。
有两个注意事项:
如果你是像我一样利用HtmlWebpackPlugin来生成HTML并自动加载chunk的话,请务必在
里手写
python 音速_webpack多页应用架构系列(十一):预打包Dll,实现webpack音速编译相关推荐
- webpack多页应用架构 - webpack的进阶应用
如何打造一个自定义的bootstrap? 前言 一般我们用bootstrap呐,都是用的从官网或github下载下来build好了的版本,千人一脸呐多没意思.当然,官网也给我们提供了自定义的工具,如下 ...
- 无字天书之Python第十五页(Excel表格操作)
博客内容 传送门 正文读 正文写 到此Python基础就此结束- 传送门 无字天书之Python第一页 无字天书之Python第二页 无字天书之Python第三页 无字天书之Python第四页 无字天 ...
- 亿级商品详情页架构演进技术解密 | 高可用架构系列
亿级商品详情页架构演进技术解密 | 高可用架构系列 --http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=210272034&i ...
- python 全栈开发,Day137(爬虫系列之第4章-scrapy框架)
python 全栈开发,Day137(爬虫系列之第4章-scrapy框架) 一.scrapy框架简介 1. 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所 ...
- 高并发架构系列:MQ消息队列的12点核心原理总结
2019独角兽企业重金招聘Python工程师标准>>> 消息队列已经逐渐成为分布式应用场景.内部通信.以及秒杀等高并发业务场景的核心手段,它具有低耦合.可靠投递.广播.流量控制.最终 ...
- 微服务架构系列二:密码强度评测的实现与实验
本文是继<微服务架构系列一:关键技术与原理研究>的后续,系列一中论述了微服务研究的背景和意义,主要调研了传统架构的发展以及存在的问题和微服务架构的由来,然后针对微服务架构的设计原则.容器技 ...
- Sharepoin学习笔记—架构系列—Sharepoint服务(Services)与服务应用程序框架(Service Application Framework) 1
Sharepoin学习笔记-架构系列-Sharepoint服务(Services)与服务应用程序框架(Service Application Framework) 1 Sharepoint服务是Sha ...
- 抓取安居客二手房经纪人数据,python爬虫自动翻页
为什么80%的码农都做不了架构师?>>> 和链接不一样,安居客网站里面没有找到总页数,可能在json里面有,只是我没有找到. 基于此能不能做网页的循环爬取呢. 能否判断页面读取 ...
- python cs开发框架_用Python编写一个简单的CS架构后门的方法
用Python编写一个简单的CS架构后门的方法 来源:中文源码网 浏览: 次 日期:2019年11月5日 [下载文档: 用Python编写一个简单的CS架构后门的方法.txt ] (友情 ...
最新文章
- 算法 - 时间复杂度
- 3D视觉工坊—助学助研计划正式启动!
- java验证码的实现
- 避免畸形儿受孕时间有10忌
- python前后两个下划线_Python中一个下划线_和两个下划线__的区别
- 协议圣经 五 rtsp client
- 路由交换基础——DHCP工作原理及DHCP Relay
- 开源软件的中年危机如何破解?
- sqlserver 批量删除相同前缀名的表
- 递归和迭代_斐波那契数列的实现:递归方式和迭代方式
- i.mx6 linux 占用率,i.MX6UL在Linux和Windows平台下SD启动卡测试步骤
- php文章详情页排版,WordPress自定义文章详情页模板
- 覆盖计算机网络分类有哪些 英语缩写,简述按覆盖范围划分计算机网络的分类类型有哪些?英语缩写分别是什么?...
- 计算机启动灯光提示,为什么我的电脑开机时指示灯为黄色并不断闪烁,且开不开机?...
- linux下cpp文件,linux怎么编译cpp文件?
- 实训项目名称: 双绞线的制作
- 量化金融-分类数据的检验
- SQL Server使用SUM(求和)函数
- 写给大家看的设计模式 1
- 七、jQuery动画特效(二)
热门文章
- python把英语句子成分字母_句子成分的表达字母
- 最大公约数最小公倍数
- 自营型电商和平台型电商的行业秘密是什么?
- mysql aes密钥大于16位_aes秘钥限制问题解决办法
- mysql用大白话解释_Java基础--2021Java面试题系列教程--大白话解读
- java动态变量名反射_Java动态性—反射 - Eclipse666的个人空间 - OSCHINA - 中文开源技术交流社区...
- 华为硬件工程师社招机考题库_干货:2016年华为中兴硬件工程师笔试题目与经验...
- React antd Descriptions span属性无效问题
- 会话跟踪之Session
- 笔记 — 动画效果(Css3)