webpack 优化笔记

import. 发布于2019-08-23 12:01 / 3325人阅读

摘要：的默认值是指先去当前目录的目录下找对应的模块，如果没有找到，就去上一级目录层层往上找。能让同时间做多件事，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

优化可以从哪些方面入手

1、优化开发体验

优化构建速度，项目庞大时构建的耗时比较久

优化使用体验，通过自动化手段完成一些重复工作

2、优化输出质量

减少用户感知到的加载时间，即首屏加载时间

提升流畅度，即提升代码性能

webpack 可以做哪些优化

1、缩小文件搜索范围
webpack 在启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归解析，在遇到导入语句时，webpack 会做一下操作

寻找对应的导入文件

使用配置中的 Loader 去处理文件，例如解析 js 文件用的 babel-loader

1.1 优化 Loader配置
可通过 test, include,exclude 三个配置进行优化

关于 babel-loader cacheDirectory 的配置，可参考
https://webpack.docschina.org...

1.2 优化 resolve.modules 配置
webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，resolve 配置 webpack 如何寻找模块对应的文件。resolve.modules 的默认值是 ["node_modules"], 指先去当前目录的./node_modules 目录下找对应的模块，如果没有找到，就去上一级目录../node_modules, 层层往上找。一般我们安装的第三方目录都会放在项目的根目录 ./node_modules 目录下，可以指明第三方模块的绝对路径，减少查找路径

2、使用CommonsChunkPlugin分割代码
对于多入口，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用，不需要每次访问一个新页面时，再去加载一个更大的文件

3、使用动态链接库文件
将网页依赖的基础模块抽离出来，打包到一个多带带的动态链接库中，一个动态链接库可以包含多个模块；
当需要导入的模块存在于某个动态链接库时，这个模块不会被再次打包，而是去动态链接库中获取

构建动态链接库

引用动态链接库

4、使用Happypack
由于 JavaScript 是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。HappyPack 能让 Webpack 同时间做多件事，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97864.html

webpack@4.32.2研究笔记【02】- mode

摘要：简介模式是新增的配置，用来指定使用对应模式的内置优化它有三个可选模式默认为。源码地址选项描述通过插件将的值设为。启用和通过插件将的值设为。使用默认的优化项。注意上面说的并不是的运行环境变量，它其实是通过插件设置的一个全局变量。简介 mode（模式）是webpack4.0.0新增的配置，用来指定webpack使用对应模式的内置优化；它有三个可选模式：producti...

newtrek 2019-08-23 17:51 评论0 收藏0
webpack v2升级踩坑笔记

摘要：从再到目前当红明星，前端模块打包技术日新月异，在今年月份和月份左右接连更新了和版本为了减少冗余模块，缩减文件大小，中也加入了关于的特征，可以查看知乎如何评价新引入的代码优化技术的讨论。从Grunt->gulp->webpack,再到目前当红明星rollup，前端模块打包技术日新月异，webpack在今年1月份和6月份左右接连更新了v2和v3版本,为了减少冗余模块，缩减bundle文件...

JayChen 2019-08-20 17:59 评论0 收藏0
webpack学习笔记（3）-webpack使用

摘要：配置如上图测试用例所示，由于这个插件默认使用了来作优化，所以它不仅压缩了代码删掉了代码中无用的注释还去除了冗余的优化了的书写顺序，优化了你的代码。 webpack基本使用 // webpack4中除了正常安装webpack之外，需要再单独安一个webpack-cli npm i webpack webpack-cli -D 基本命令行 webpack [] 配置文件使用直接输...

wwq0327 2019-08-23 11:33 评论0 收藏0
webpack 实践笔记（一）--- 入门

摘要：实践笔记入门一官网文档地址实践工程地址本篇文章可切换到分支查看源代码。简单分步实践创建一个空文件夹，进入全局安装创建文件创建执行命令这个时候项目中多了一个文件，使用标签将其引入到中在浏览器中打开文件，页面出现文字。 webpack 实践笔记入门（一） [webpack官网文档地址]:（http://webpack.github.io/docs...） [实践工程地址]: (https:...

bergwhite 2019-08-20 11:03 评论0 收藏0
webpack4使用笔记之plugin

摘要：默认为根据自己的指定的模板文件来生成特定的文件主要是针对多入口文件。那么选项就可以决定是否都使用这些生成的文件。压缩压缩通过使用可以看到项目各模块的大小，可以按需优化图片来自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...

ymyang 2019-08-23 14:57 评论0 收藏0