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 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
详解angular element()方法使用
Apr 08 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
如何在JavaScript中正确处理变量
Dec 25 Javascript
js canvas实现五子棋小游戏
Jan 22 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数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP模板解析类实例
2015/07/09 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
vue实现文字加密功能
2019/09/27 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python3实现生成随机密码的方法
2014/08/23 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
基于Python函数和变量名解析
2019/07/19 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python怎么判断模块安装完成
2020/06/19 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
新农村建设汇报材料
2014/08/15 职场文书
责任书范本
2014/08/25 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
python ConfigParser库的使用及遇到的坑
2022/02/12 Python