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的话,请务必在

里手写

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

whereis 命令

可以用来查看命令的路径,安装在哪里 whereis命令是定位可执行文件、源代码文件、帮助文件在文件系统中的位置 [rootsalt-server-192 a]# whereis mysql mysql: /usr/bin/mysql /usr/lib64/mysql /usr/share/mysql /usr/share/man/man1/mysql.1.gz 转载于:https://ww…

css实现3D立方体旋转特效

先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class"rect-wrap"> <!--舞台元素&#xff0c;设置perspective&#xff0c;让其子元素获得透视效果。--><div class"container"> <!-- 容器&#…

Eclipse中的Tomcat:6个流行的“如何”问题

学习新技术总是一个艰难的过程。 当您尝试学习将要相互交互的两种技术时&#xff0c;此过程将变得更加困难。 Tomcat和Eclipse是Java EE开发中最流行的先决条件。 因此&#xff0c;要成为一名专业的开发人员&#xff0c;您需要知道如何使用此对执行最需要的操作以及如何进行一些…

adc分辨率和精度的区别_科普 | 传感器的灵敏度、分辨率和精度三者之间有何区别?...

传感器作为一种检测装置&#xff0c;具有微型化、数字化、智能化、多功能化、系统化、网络化的特点。在现代工业生产尤其是自动化生产过程中&#xff0c;需要各种传感器来监视和控制生产过程中的各个参数&#xff0c;使设备工作在正常状态或最佳状态&#xff0c;并使产品达到最…

Node08 - 配置模板引擎 -(route)

1、配置模板引擎 &#xff08;01&#xff09;、输出什么东西        //view engine&#xff1a;视图模板引擎(以何种方式呈现给用户) > 指定输出html           server.set(view engine, html); &#xff08;02&#xff09;、模板文件放在哪 //views: 指定好…

for循环与foreach的区别

for循环与foreach的区别 foreach 依赖 IEnumerable. 第一次 var a in GetList() 时 调用 GetEnumerator 返回第一个对象 并 赋给a, 以后每次再执行 var a in GetList() 的时候 调用 MoveNext.直到循环结束. 期间GetList()方法只执行一次. 1 2 3 4 5 6 7 8 9 10 11 12 13 fo…

SVN 定时 更新代码 Demo

1. 涉及技术&#xff1a;Winservice: 用system身份后台跑&#xff1b; Quartz&#xff1a;定时任务&#xff1b; SVN 2. 思路&#xff1a;Quartz定时调用cmd 程序,执行SVN update 命令,整个程序寄宿在Winservice3. 步骤&#xff1a;1&#xff09;service 用local system账户安…

如何在Jackson中使用PropertyNamingStrategy

Jackson api被广泛用于将json转换为Object并将Object转换为JSON。因此&#xff0c;如果您有json字符串并想在java对象中进行转换&#xff0c;请创建与json中的字段相同的bean的字段名。 Jackson在将json字段映射到java对象字段时遵循标准的bean约定&#xff0c;但是如果您有一个…

现代软件工程--阅读笔记

团队对个人的期望 &#xff08;1&#xff09;交流&#xff1a;能有效的和其他队员交流&#xff0c;从大的技术方向&#xff0c;到看似微小的问题。 &#xff08;2&#xff09;说到做到&#xff1a;“按时交付” &#xff08;3&#xff09;接受团队赋予的角色并按角色要求工作:团…

Linux上的HotSpot GC线程CPU占用空间

以下问题将测试您对Linux操作系统上运行的Java应用程序的垃圾回收和高CPU故障排除的知识。 当调查过多的GC和/或CPU利用率时&#xff0c;此故障排除技术尤其重要。 它将假定您没有访问高级监视工具的能力&#xff0c;例如Compuware dynaTrace甚至JVisualVM。 将来会介绍使用此类…

tornado-简介和原理

tornado-设计初衷 1. 追求小而精 2. epoll IO多路复用和协程 3. 支持WebSocket 4. 单线程程序(GIL限制&#xff0c;本身某种意义上不启动多进程就是单线程程序) # Python GIL介绍详情 tronado应用场景 1. 大量的http请求连接(大量的用户请求&#xff0c;要求并发性和高性能) tr…

mysql5.6.13_MySQL-5.6.13解压版(zip版)安装配置教程

1、将mysql-5.6.13-winx64.zip 解压到D:\mysql-5.6.13\目录。2、清理里面的调试文件打开这个目录&#xff0c;发现里面的文件夹和文件跟一个安装好后的MySQL基本没有区别。可能你会很郁闷&#xff0c;这个MySQL5.6.13居然有1.04GB&#xff0c;呵呵&#xff0c;仔细一看你就会发…

前端学习笔记--HTTP缓存

原文地址&#xff1a;https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hlzh-cn 缓存并重用之前获取的资源的能力是性能优化的一个关键方面。 每个浏览器都自带了 HTTP 缓存实现功能&#xff0c;只需要确保每个服务…

socket programming

进行 socket programming开始要做的工作&#xff1a; On Linux: 以下是client代码&#xff0c;使用TCP&#xff0c;注意网络字节序&#xff1a; 1 #include <sys/socket.h> 2 #include <netinet/in.h> 3 #include <arpa/inet.h> 4 int main() 5 { 6 …

如何用Veripacks替换构建模块

比较下面的两棵树。 在这两种情况下&#xff0c;目标都是拥有一个具有两个独立模块&#xff08; frontend和reporting &#xff09;和一个共享/公用模块&#xff08; domain &#xff09;的应用程序。 frontend的代码不应访问reporting代码&#xff0c;反之亦然。 两个模块都可…

JS的DOM和BOM

* JavaScript分三个部分: ECMAScript标准:JS的基本的语法DOM:Document Object Model --->文档对象模型----操作页面的元素BOM:Browser Object Model----->浏览器对象模型---操作的是浏览器一、DOM对象 文档:把一个html文件看成是一个文档,由于万物皆对象,所以把这个文档看…

mysql建表的规则_MYSQL建表规则 - Love彼岸花开的个人空间 - OSCHINA - 中文开源技术交流社区...

建立表规约【强制】表名、字段名必须使用小写字母或数字&#xff0c;禁止出现数字开头&#xff0c;禁止两个下划线中间只 出现数字。数据库字段名的修改代价很大&#xff0c;因为无法进行预发布&#xff0c;所以字段名称需要慎重考虑。说明&#xff1a;MySQL 在 Windows 下不区…

数据库(11)-- Hash索引和BTree索引 的区别

索引是帮助mysql获取数据的数据结构。最常见的索引是Btree索引和Hash索引。 不同的引擎对于索引有不同的支持&#xff1a;Innodb和MyISAM默认的索引是Btree索引&#xff1b;而Mermory默认的索引是Hash索引。 Hash索引 哈希索引包含以数组形式组织的 Bucket 集合。 哈希函数将索…

JBoss AS 8中的Java EE 7和EJB 3.2支持

你们中有些人可能已经知道Java EE 7规范的Public Final Draft版本已经发布 。 除此以外&#xff0c;此版本的Java EE还引入了EJB规范的EJB 3.2版本。 与EJB 3.1规范相比&#xff0c;EJB 3.2具有一些新功能。 我在这里引用EJB 3.2规范中的文本&#xff0c;总结了新功能&#xff…

MySQL的复制:MySQL系列之十三

一、MySQL复制相关概念 主从复制&#xff1a;主节点将数据同步到多个从节点级联复制&#xff1a;主节点将数据同步到一个从节点&#xff0c;其他的从节点在向从节点复制数据同步复制&#xff1a;将数据从主节点全部同步到从节点时才返回给用户的复制策略叫同步复制异步复制&…