性能优化中关于网络包构建速度优化的建议

如何输出Webpack构建分析

输出。Webpack构建信息的json文件：webpack-profile-jsonstats.json。

- profile:将耗时的信息记录在构造中-js :以json格式输出构造结果，最后只输出一个json文件(包含所有的构造信息)。通过web可视化查看构造分析：我们已经获得了webpack构造信息文件stats.json如何很好地可视化查看？

方案一：通过可视化分析工具Webpack Analyse，是一个在线Web应用，可以上传stats.json文件；但似乎你需要翻墙；方案二：安装webpack-bundle-analyzer工具npm i -g webpack-bundle-analyzer，生成stats.json后直接在其文件夹目录中执行webpack-bundle-analyzer，浏览器会打开对应的网页，显示web pack-bundle-analyzer stats . JSON-p 8888文档的地址。Webpack-bundle-analyzer Webpack-dashboard是一个用于统计和优化Webpack日志的工具，可以以表格形式显示日志信息。它包括构建过程和状态、日志和涉及的模块列表。jarvis是一个基于webapck-dashboard的webpack性能分析插件。性能分析的结果显示在浏览器中，比webpack-bundler-anazlyer更加美观清晰。GitHub文档地址npm i -D webpack-jarvis

Webpack.config.js配置：

const Jarvis=require(' web pack-Jarvis ')；plugins :[new Jarvis({ WatchOnly : false，port: 3001 //optional:设置端口})]；端口：监控该端口，默认值为1337，监控面板将监控该端口，通常如http://localhost:port/

Host:域名，默认localhost，无限制域名。

WatchOnly:只监听编译阶段。默认值为真。如果该值为false，jarvis不仅会在编译阶段运行，还会在编译完成后继续运行。

界面：见施工时间：时间： 11593ms(作为优化时间对比)

网络包配置的优化

启动时，网络包将从配置的条目中解析文件中的导入语句，然后递归解析它。

导入语句Webpack时会采取以下操作：

根据导入语句搜索对应的待导入文件；根据要导入文件的后缀，使用配置中的Loader来处理文件(例如使用ES6时需要使用babel-loader来处理文件)，可以针对这两点优化搜索路径

1.优化装载机配置

Loader处理文件的转换非常耗时，所以需要让Loader处理尽可能少的文件

{ test: /\。js $/use :[' babel-loader？缓存目录'，///打开转换结果缓存]，包括：路径。解析(_ _ dirname，' src ')，//只使用Babel-LoaderExclude3360path。解析(_ _ dirname，/node_modules ')，//排除node_modules目录}中的文件，2。优化resolve.modules配置

Resolve.modules用于配置webpack应该在哪些目录中查找第三方模块。默认值为['node_modules']。然而，它会寻找。/node_modules，然后转到./node_modules，如果它不可用的话。

因此，当安装的第三方模块放在项目的根目录中时，无需安装默认的逐层搜索，直接指明存储的绝对位置

resolve : { modules :[路径。解析(_ dirname，' node _ modules')]，} 3。优化resolve.extensions的配置

导入不带文件后缀的路径时，webpack会自动带一个后缀来尝试询问文件是否存在，并解析，extensions用于配置尝试后缀的列表；默认为extension s 3360[' js '，' JSON ']；

当需要时。/data ')，webpack会先尝试查找data.js，但不会查找data.json又来了。如果列表更长，或者正确的后缀更晚，则尝试的次数会更多；

因此，为了改善配置期间的建筑优化，有必要观察：

出现频率高的文件后缀最先出现；列表越小越好；写导入语句时，尽量写后缀名。因为项目中使用了很多jsx，所以配置extension s 3360['。jsx '，'。js']。

基本配置后检查施工速度：Time: 10654ms配置前时间： 11593毫秒

使用DllPlugin优化

使用webpack进行打包时，依赖的第三方库，如react、react-dom等，可以与业务代码分开打包；

只要不升级依赖库版本，webpack只需要打包项目业务代码，待导入的模块在动态链接库中时，会直接从中获取；第三方库只需要打包一次，而不是编译第三方库。

需要做些什么才能访问：

撤回相关的第三方模块，并将它们打包到单独的动态链接库中。当要导入的模块存在于动态链接库中时，让它们直接从链接库中获取项目所依赖的所有动态链接库，所有的动态链接库都需要加载access工具(webpack已经内置)

DllPlugin插件：用于打包单个动态链接库文件；

DllReferencePlugin:用于将DllPlugin插件打包的DLL库文件引入主配置文件

配置webpack_dll.config.js以构建动态链接库

const path=require(' path ')；const DllPlugin=require(' web pack/lib/DllPlugin ')；module . exports={ mode : ' production '，entry : {//将React的相关模块放入动态链接库React :[' React '，' react-DOM '，' react-router-DOM '，' React-loaded ']中。librarys: ['wangeditor']，utils: ['axios '，' js-cookie'] }，output : { filename : '[name]-dll . js '，path : path . resolve(_ dirname，Dll ')，//存储动态链接库的全局变量名，plus _dll_防止全局变量冲突library: '_dll_[name]' }，//动态链接库的全局变量名需要在中保持一致//例如，name ' : ' _ dll _ react ' plugins 3360[new dll plugin({ name 3360 ' _ dll _[name]]存在于react.manifest.json字段中。path : path . join(_ dirname，' dll '，'[name]。manifest.json')})]}在webpack.pro.config.js中使用。

const DllReferencePlugin=require(' web pack/lib/DllReferencePlugin ')；plugins: [//告诉webpack新的dllreference插件({ manifest :需要哪些动态链接库('。/dll/react.manifest.json')})使用。新的DllReferencePlugin({ manifest : require ')。/dll/libraries . manifest . JSON ')})，新的dllreference插件({manifest : require ')。/dll/utils.manifest.json')})。]注意：在webpack_dll.config.js文件中，DllPlugin中的name参数必须与output.library中的name参数一致；DllPlugin的name参数影响输出清单. json的名称；当从全局变量获取动态链接库的内容时，webpack.pro.config.js中的DllReferencePlugin将读取manifest.json的名称，并将该值用作全局变量名

执行构建

webpack -进度-颜色-配置。/webpack.dll.config.js

webpack -进度-颜色-配置。/webpack.prod.js

在html中引入dll.js文件

施工时间对比：[' 11593毫秒'，' 10654毫秒'，' 8334毫秒']

HappyPack并行构造的优化

核心原理：将webpack中最耗时的加载器文件转换任务分解为多个进程进行并行处理，从而减少构建时间。

HappyPack

访问快乐包

安装：npm i -D happypack

要重新配置规则部分，请让加载程序完成分发：

const Happypack=require(' Happypack ')；const happyThreadPool=HappyPack。thread pool({ size : 5 })；//建立共享进程池，包括5个进程.plugins: [//happypack并行处理New happypack({//使用唯一ID表示当前happy pack用于处理特定类别的文件，对应于规则中的使用，ID :' babel '，Loaders 3360 ['babel-loader？CachedDirectory']，//默认设置：加载程序处理ThreadPool : Happy ThreadPool，//使用共享池处理})，new HappyPack({ //使用唯一ID表示当前HappyPack用于处理特定文件。随着在规则中的使用，id :' CSS '，加载器： ['CSS-loader '，' postcss-loader '，' sass-loader']，thread pool 3360 happy thread pool })]，module : { rules 3360 [{ test :/\。(js|jsx)$/，use: ['happypack/loader？Id=babel']，exclude:path。解析(_ _ dirname，'。/node _ modules ')，}，{test:/\。(SCS | css)$/，//这里使用mini-css-extract-plugin来提取CSS。如果你把它放在上面，你会得到一个错误。使用：[minisextractlupplugin。装载机，快乐包/装载机？Id=CSS']，包含：[路径。解析(_ dirname，' src ')，路径。join (_ _ dirname，'。/node _ modules/antd')]}，}参数：

Threads:指打开几个子进程来处理这类文件，默认值为3；

verbose:是否运行HappyPack输出日志，默认为真；

ThreadPool:代表共享进程池，即多个HappyPack示例使用共享进程池中的子进程来处理任务，以防止过度占用资源

代码压缩将UglifyJsPlugin插件替换为ParallelUglifyPlugin

独立的JS压缩插件由单线程执行，而webpack-parallel-uglify-plugin可以并行执行

配置参数：

UglifyJS: {}:用于压缩ES5代码时的配置。对象类型test3360/。js $/g:使用规律性来匹配哪些文件需要由ParallelUglifyPlugin压缩。默认值为/。js$/include: []:使用规律性来包含压缩文件。默认值为[]。exclude :【】:使用正则性包含未压缩文件，默认值为【】cacheDir:“”:缓存压缩结果，直接从缓存中获取压缩结果，下次遇到相同输入时返回，默认不会缓存，打开缓存并设置目录路径，workerCount:“”:打开多个子进程并发执行。默认值为当前运行计算机的CPU内核数减1 sourceMap: false:是否为压缩后的代码生成对应的sourceMap，默认不生成.minimizer r 3360【///webpack k 3360生产模式默认配备了js压缩，但是如果在这里设置了css压缩，那么也应该重置Js压缩，因为使用minimizer会自动取消web pack、new optimizer splash({ assetnameregexp 3360/\)的默认配置。CSS $/g，CSS处理器3360 required(' CSS nano ')，CSS processor options 3360 { discard comments : { removeall : true } }，canPrint: true })，new parallel lifyplugin({ cachedir : '。cache/'，uglifyjs : { output : }//是否输出可读性强的代码，即保留空格和制表符，默认输出；为了达到更好的压缩效果，可以将其设置为false beautify: false//代码中是否保留注释，默认为保留，可以设置为false comments : false}，压缩： {//UglifyJS删除未使用的代码时是否输出警告信息，默认为输出警告： false，//是否删除代码中的所有console语句，默认为不删除，打开后将删除所有console语句drop_console: true，//是否嵌入已经定义但只使用一次的变量，如设置var x=1；Y=x，转换为y=1，默认为no collapse _ vars: true，} }})，]，]构造结果比较：['11593ms '，' 10654ms '，' 8334ms '，' 7734ms']

整体施工速度从12000毫秒下降到现在的8000毫秒

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。