webpack常用构建优化策略小结


Posted in Javascript onNovember 21, 2019

简介

读了《深入浅出webpack》总结一下常用的webpack的构建优化策略,可通过以下手段来提升项目构建时的速度

更精准的loader规则

将loader规则写清楚

仅让需要处理的文件,进入loader处理环节,如下

rules: [{
   // 正则尽量准确
   test: /\.js$/,
   // 使用缓存,缓存后在文件未改变时编译会更快(缓存查找原理见补充1)
   use: ['babel-loader?cacheDirectory'],
   // 指定需要处理的目录
   include: path.resolve(__dirname, 'src')
   // 理论上只有include就够了,但是某些情况需要排除文件的时候可以用这个,排除不需要处理文件
   // exclude: []
  }]

更精准的查找目录

将查找路径设置精确

理论上我们项目的第三方依赖均应在自己的工程的node_modules下,所以我们可以设置查找目录,减少node的默认查找(默认查找方式见补充2)

module.exports = {
  resolve: {
    // 指定当前目录下的node_modules目录
    modules: [path.resolve(__dirname, 'node_modules')]
  }
}

更精准的扩展名

数量更多类型的文件尽量放在前面

平时写代码,我们都习惯直接写文件名,而不去写扩展名,那么解析则按照下面属性进行解析

module.exports = {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
}

默认值

extensions: [".js", ".json"]

使用动态链接库预编译大模块

使用动态链接库,提前编译大模块

原理请见补充3

新建一个文件webpack_dll.config.js,内容如下

const path = require('path');
const webpack = require('webpack');

// 复用的大模块放在这里,这样每次都不需要重新编译了
const vendors = [
 'react',
 'react-dom',
 'lodash'
];

module.exports = {
 mode: 'development',
 output: {
  path: path.resolve(__dirname, './dist'),
  filename: '[name].js',
  library: '[name]',
 },
 entry: {
  vendors,
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.resolve(__dirname, './dist/manifest.json'),
   name: '[name]',
  }),
 ],
};

执行webpack --config webpack_dll.config.js进行首次编译(如果更新版本需要再次编译)

然后在你的webpack配置文件中引入manifest.json

plugins: [
  new webpack.DllReferencePlugin({
   manifest: require('./dist/manifest.json')
  })
 ],

多进程处理文件

使用HappyPack同时处理多个loader编译任务

为了发挥多核CPU电脑的功能,利用HappyPack将任务分发给多个子进程并发执行

const path = require('path');
const HappyPack = require('happypack');
// 共享5个进程池
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

module.exports = {
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'),
 },
 module: {
  // noParse: [/react\.production\.min\.js$/],
  rules: [{
   test: /\.js$/,
   // 和下面插件id一直,happypack才可以找到
   use: ['happypack/loader?id=babel'],
   include: path.resolve(__dirname, 'src')
  }]
 },
 plugins: [
  // 插件可以实例化多个
  new HappyPack({
   // 与上面对应
   id: 'babel',
   // 实际要使用的loader
   loaders: ['babel-loader?cacheDirectory'],
   // 默认开启进程数
   threads: 3,
   // 是否允许happyPack打印日志
   verbose: true,
   // 共享进程数,如果你使用超过一个happyplugin,官方建议共享进程池
   threadPool: happyThreadPool
  })
 ],
};

原理见补充4

多进程压缩文件

使用ParallelUglifyPlugin多进程同时压缩文件

ParallelUglifyPlugin是在UglifyJS基础上,增加了多进出处理的能力,加快了压缩速度

import ParallelUglifyPlugin from 'webpack-parallel-uglify-plugin';
 
module.exports = {
 plugins: [
  new ParallelUglifyPlugin({
   test,
   include,
   exclude,
   cacheDir,
   workerCount,
   sourceMap,
   uglifyJS: {
   },
   uglifyES: {
   }
  }),
 ],
};

减少监听文件

减少监听文件

原理见补充5

当我们使用webpack的watch功能进行文件监听时,更好的方式是控制监听目录,如下,排除node_modules减少对该目录监听,减少编译所需要循环的文件,提高检查速度

module.export = {
  watchOptions: {
    ignored: /node_modules/
  }
}

其他没那么重要的优化

更精准的mainFields

默认的这个值查找方式见官网点击此处

看了下react和lodash,只有一个main,目前来看使用es6看来还不普遍,所以这个值目前可能不太重要

module.exports = {
  resolve: {
    mainFields: ['main']
  }
}

第三方库映射

为什么这个不重要,我发现react直接导出的index.js则是根据环境判断使用哪份代码,目测来看并不需要进行循环依赖的处理

通过依赖,则可以直接使用打包后代码,而不需webpack去循环依赖

resolve: {
  mainFields: ["main"],
  alias: {
   'react': path.resolve(__dirname, './node_modules/react/cjs/react.production.min.js')
  }
 }

不使用inline模式的devServer

原理见补充6

默认情况下,应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中,并且构建消息将会出现在浏览器控制台。

当使用inline模式时,devServer会向每个Chunk中注入一段重载的脚本代码,但是其实一个页面只需要一次,所以当Chunk过多时,可以将inline设置为false

module.export = {
  devServer: {
    inline: false
  }
}

补充

补充1-cacheDirectory原理

当有设置cacheDirectory时,指定的目录将用来缓存loader的执行结果。之后的 webpack 构建,将会尝试读取缓存,来避免在每次执行时,可能产生的、高性能消耗的Babel重新编译过程。如果设置了一个空值 (loader: 'babel-loader?cacheDirectory') 或者 true (loader: babel-loader?cacheDirectory=true),loader 将使用默认的缓存目录 node_modules/.cache/babel-loader,如果在任何根目录下都没有找到 node_modules 目录,将会降级回退到操作系统默认的临时文件目录。

补充2-node的默认查找方式

  • 查找当前目录下的node_modules目录,看是否有匹配项,如有,命中文件
  • 寻找父目录的下的node_modules,如有,命中文件
  • 按照这个规则一直往父目录搜索直到到根目录下的node_modules

补充3-动态链接库思想

大量项目中可以复用的模块只需要被编译一次,在之后的构建过程中被动态链接库包含的模块将不会重新编译,而是直接使用动态链接库中的代码。(注:如果升级依赖的模块版本,需要重新编译动态链接库)

补充4-HappyPack原理

webpack构建中,需要大量的loader转换操作,很耗时,由于nodejs是单线程的,如果想更好利用cpu的多核能力,可以开启多个进程,同时对文件进行处理;可以看到在配置文件中,我们每次将文件交给happypack-loader去处理,然后由happypack去调度来执行文件的处理(happypack采用哪个loaders进行处理,是通过id知道的)

补充5-文件监听原理

webpack会从入口触发,将所有的依赖项放到一个list里边,然后每次修改文件内容,回去遍历整个list里边的文件,看是否有编辑时间的变化,如果有的话则进行编译

补充6-自动刷新原理

  • 向要开发的网页中注入代理客户端代码,通过代理客户端去刷新整个页面(默认)
  • 将要开发的网页放进一个iframe,通过刷新iframe去看刷新效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 #Javascript
js实现课堂随机点名系统
Nov 21 #Javascript
JavaScript实现简单随机点名器
Nov 21 #Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 #Javascript
Vue实现按钮级权限方案
Nov 21 #Javascript
微信小程序实现星级评价
Nov 20 #Javascript
微信小程序音乐播放器开发
Nov 20 #Javascript
You might like
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python使用mysql数据库示例代码
2017/05/21 Python
详解python3中的真值测试
2018/08/13 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python二元算术运算常用方法解析
2020/09/15 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
weblogic面试题
2016/03/07 面试题
2015年安全工作总结范文
2015/04/02 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL