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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 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
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
python学习必备知识汇总
2017/09/08 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python hashlib加密实现代码
2019/10/17 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
岗位职责定义及内容
2013/11/08 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
心灵点滴观后感
2015/06/02 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Python开发五子棋小游戏
2022/04/28 Python