webpack4.0优化那些事儿

一 缩小文件搜索范围

1 include & exclude

1) action

  • 限制编译范围

2) useage

module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader?cacheDirectory'],
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}
]
}

'babel-loader?cacheDirectory'

You can also speed up babel-loader by as much as 2x by using the cacheDirectory option. This will cache transformations to the filesystem.

QA

命令行warning

[BABEL] Note: The code generator has deoptimised the styling of "/Users/xxx/Documents/xxx/webpack_test/test3/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".

加上exclude限制范围就不会报错了

2 resolve.modules

1) action

  • Tell webpack what directories should be searched when resolving modules.

2) useage

resolve: {
modules: [path.resolve('node_modules'), path.resolve('lib')]
}

3) note

  • Absolute and relative paths can both be used, but be aware that they will behave a bit differently.

  • A relative path will be scanned similarly to how Node scans for node_modules, by looking through the current directory as well as it's ancestors (i.e. ./node_modules, ../node_modules, and on).

  • With an absolute path, it will only search in the given directory.

  • If you want to add a directory to search in that takes precedence over node_modules/:(即是有先后顺序的)

modules: [path.resolve(__dirname, "src"), "node_modules"]

4) QA

Module not found: Error: Can't resolve 'ajax' in '/Users/xxx/Documents/xxx/webpack_test/test3/src'

当你需要指定除node_modules之外的其它模块目录的时候可以在数组中添加属性

3 resolve.mainFields

1) action

  • Webpack 配置中的 resolve.mainFields 用于配置第三方模块使用哪个入口文件。

安装的第三方模块中都会有一个 package.json文件,用于描述这个模块的属性,其中有些字段用于描述入口文件在哪里,resolve.mainFields 用于配置采用哪个字段作为入口文件的描述。

可以存在多个字段描述入口文件的原因是因为有些模块可以同时用在多个环境中,针对不同的运行环境需要使用不同的代码。 以 isomorphic-fetch API 为例,它是 Promise的一个实现,但可同时用于浏览器和 Node.js 环境。

2) useage

为了减少搜索步骤,在你明确第三方模块的入口文件描述字段时,你可以把它设置的尽量少。 由于大多数第三方模块都采用 main字段去描述入口文件的位置,可以这样配置 Webpack:

module.exports = {
resolve: {
// 只采用 main 字段作为入口文件描述字段,以减少搜索步骤
mainFields: ['main'],
},
};

4 resolve.alias

1) action

  • 配置项通过别名来把原导入路径映射成一个新的导入路径
  • 此优化方法会影响使用Tree-Shaking去除无效代码

2) useage

alias: {
"bootstrap": "bootstrap/dist/css/bootstrap.css"
}

5 resolve.extensions

1) action

  • 在导入语句没带文件后缀时,Webpack会自动带上后缀后去尝试询问文件是否存在 -
  • 默认后缀是 extensions: ['.js', '.json']

2) useage

3) note

  • 后缀列表尽可能小
  • 频率最高的往前方
  • 导出语句里尽可能带上后缀

6 module.noParse

1) action

  • module.noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析处理

2) useage

module: {
noParse: [/react\.min\.js/]
}

2) note

被忽略掉的文件里不应该包含 import 、 require 、 define 等模块化语句

二 DLL

1 action

dll 为后缀的文件称为动态链接库,在一个动态链接库中可以包含给其他模块调用的函数和数据

  • 把基础模块独立出来打包到单独的动态连接库里
  • 当需要导入的模块在动态连接库里的时候,模块不能再次被打包,而是去动态连接库里获取

2 usage

定义插件(DLLPlugin) ---> 引用插件(DllReferencePlugin)

本次例子用jquery举例

1) 定义DLL

  • 用于打包出一个个动态连接库
  • 需要单独build

webpack.jquery.config.js

module.exports = {
entry: ["jquery"],
output: {
filename: "vendor.js",
path: path.resolve(__dirname, "dist"),
libraryTarget: 'var',// 打包的方式,hou
library: "vendor_lib_vendor"// DLL的名字
},
plugins: [
new webpack.DllPlugin({
name: "vendor_lib_vendor",// 定义DLL
path: path.resolve(__dirname, "dist/vendor-manifest.json")
})
]
};

package.json 的scripts添加

"dll": "webpack --config webpack.jquery.config.js --mode development"

配置好上述的文件后,在终端运行 npm run dll,时候会在dist目录下生成两个文件,分别是vendor.jsvendor-manifest.jsonvendor.js包含的就是打包后的jquery文件代码,vendor-manifest.json是用来做关联的。DLL定义好了,接下来就是应用打包好的DLL了。

2) 引用DLL

webpack.config.js 配置文件中引入DllPlugin插件打包好的动态连接库

plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require("./dist/vendor-manifest.json")
})
],

3) 使用DLL

app.html

在app.html的底部添加

<script src="./vendor.js"></script>

3 note

libraryTargetlibrary

当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们。

  • output.libraryTarget 配置以何种方式导出库。
  • output.library 配置导出库的名称。 它们通常搭配在一起使用。

output.libraryTarget 是字符串的枚举类型,支持以下配置。

1) var (默认)

编写的库将通过 var 被赋值给通过 library 指定名称的变量。

假如配置了 output.library='LibraryName',则输出和使用的代码如下:

// Webpack 输出的代码
var LibraryName = lib_code; //其中 lib_code 代指导出库的代码内容,是有返回值的一个自执行函数。 // 使用库的方法
LibraryName.doSomething();

2) commonjs2

编写的库将通过 CommonJS 规范导出。

假如配置了 output.library='LibraryName',则输出和使用的代码如下:

// Webpack 输出的代码
exports['LibraryName'] = lib_code; // 使用库的方法
require('library-name-in-npm')['LibraryName'].doSomething();
// 其中 library-name-in-npm 是指模块发布到 Npm 代码仓库时的名称。

3) commonjs2

编写的库将通过 CommonJS2 规范导出,输出和使用的代码如下:

// Webpack 输出的代码
module.exports = lib_code; // 使用库的方法
require('library-name-in-npm').doSomething();

CommonJS2 和 CommonJS 规范很相似,差别在于 CommonJS 只能用 exports 导出,而 CommonJS2 在 CommonJS 的基础上增加了 module.exports 的导出方式。

在 output.libraryTarget 为 commonjs2 时,配置 output.library 将没有意义。

4) this

编写的库将通过 this 被赋值给通过 library 指定的名称,输出和使用的代码如下:

// Webpack 输出的代码
this['LibraryName'] = lib_code; // 使用库的方法
this.LibraryName.doSomething();

5) window

编写的库将通过 window 被赋值给通过 library 指定的名称,即把库挂载到 window 上,输出和使用的代码如下:

// Webpack 输出的代码
window['LibraryName'] = lib_code; // 使用库的方法
window.LibraryName.doSomething();

6) global

编写的库将通过 global 被赋值给通过 library 指定的名称,即把库挂载到 global 上,输出和使用的代码如下:

// Webpack 输出的代码
global['LibraryName'] = lib_code; // 使用库的方法
global.LibraryName.doSomething();

三 HappyPack

1 action

HappyPack就能让Webpack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。

2 usage

install

由于webpack 4.0 刚刚发布,响应的插件还没有更新完,不过可以在后面加一个@next来安装即将发布的版本

npm i happypack@next -D

webpack.config.js

module: {
rules: [
{
test: /\.css$/,
use: 'happypack/loader?id=css',
//把对.js文件的处理转交给id为babel的HappyPack实例
//用唯一的标识符id来代表当前的HappyPack是用来处理一类特定文件
include: path.resolve('./src'),
exclude: /node_modules/
},
{
test: /\.js/,
use: 'happypack/loader?id=babel',
include: path.resolve('./src'),
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html'
}),
new HappyPack({
id: 'babel',
loaders: ['babel-loader']// 和rules里的配置相同
}),
new HappyPack({
id: 'css',
loaders: ['style-loader', 'css-loader']// 和rules里的配置相同
}),
]

四 ParallelUglifyPlugin

1.action

  • 可以把对JS文件的串行压缩变为开启多个子进程并行执行

2 usage

insatll

npm install webpack-parallel-uglify-plugin -D

webpackage.config.js

new ParallelUglifyPlugin({
workerCount: os.cpus().length - 1,//开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1
uglifyJS: {
output: {
beautify: false, //不需要格式化
comments: true, //不保留注释
},
compress: {
warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
drop_console: true, // 删除所有的 `console` 语句,可以兼容ie浏览器
collapse_vars: true, // 内嵌定义了但是只用到一次的变量
reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
}
}
})

五 服务器自动刷新

1 文件监听

1) action

  • 可以监听文件变化,当文件发生变化的时候重新编译

2) useage

watch: true,
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1
}

3) note

watch

只有在开启监听模式时(watch为true),watchOptions才有意义

aggregateTimeout

监听到变化发生后等300(ms)再去执行动作,防止文件更新太快导致编译频率太高

poll

通过不停的询问文件是否改变来判断文件是否发生变化,默认每秒询问1000次

文件监听流程

webpack定时获取文件的更新时间,并跟上次保存的时间进行比对,不一致就表示发生了变化,poll就用来配置每秒问多少次。

当检测文件不再发生变化,会先缓存起来,等等待一段时间后之后再通知监听者,这个等待时间通过aggregateTimeout配置。

webpack只会监听entry依赖的文件

我们需要尽可能减少需要监听的文件数量和检查频率,当然频率的降低会导致灵敏度下降。

2 自动刷新浏览器

1) use

devServer: {
inline: true
},

2) note

webpack负责监听文件变化,webpack-dev-server负责刷新浏览器。这些文件会被打包到chunk中,它们会代理客户端向服务器发起WebSocket连接

3 模块热替换

1) action

  • 模块热替换(Hot Module Replacement)的技术可在不刷新整个网页的情况下只更新指定的模块.
  • 原理是当一个源码发生变化时,只重新编译发生变化的模块,再用新输出的模块替换掉浏览器中对应的老模块

2) 优点

  • 反应更快,时间更短
  • 不刷新网页可以保留网页运行状态
  • 监听更少的文件
  • 忽略掉 node_modules 目录下的文件

2) use

webpack.config.js

devServer: {
hot:true//将hot设置为true
}, // 需要的插件
plugins: [
new webpack.NamedModulesPlugin(),//显示模块的相对路径
new webpack.HotModuleReplacementPlugin()// 启动热加载功能
]

code

if (module.hot) {
module.hot.accept('./hot.js', () => {
let hot = require('./hot');
document.getElementById('app2').innerHTML = hot + '1';
})
}

3 note

需要热加载的模块需要在初始化的时候引入到模块中,否则不会触发HMR。

六 区分环境

1 action

在开发网页的时候,一般都会有多套运行环境,例如,在开发过程中方便开发调试的环境。发布到线上给用户使用的运行环境。

线上的环境和开发环境区别主要有以下不同:

  • 线上的代码被压缩
  • 开发环境可能会打印只有开发者才能看到的日志
  • 开发环境和线上环境后端数据接口可能不同

2 usage

package.json

  • cross-env跨平台设置环境变量(后面没有&&)
"scripts": {
"build-dev": "cross-env NODE_ENV=development webpack --mode development",
"build-prod": "cross-env NODE_ENV=production webpack --mode production"
}

webpack.config.js

  • 根据环境变量区分生产环境还是开发环境,然后和webpack.base.config.js合并,生产环境(或者开发环境)的优先级高于webpack.base.config.js的配置。
let merge = require('webpack-merge');
let base = require('./webpack.base.config');
let other = null;
if (process.env.NODE_ENV === 'development') {
other = require('./webpack.dev.config');
} else {
other = require('./webapack.prod.config');
}
module.exports = merge(base, other);

webpack.base.config.js

  • 基本配置
  • webpack.DefinePlugin 定义环境变量
基本配置...
plugins: [
new webpack.DefinePlugin({
__isDevelopment__: JSON.stringify(process.env.NODE_ENV == 'development')
})
]

webpack.dev.config.js

  • output举例,如果开发和生产环境的参数不同,就会覆盖webpack.base.config.js里面的配置
const path = require('path');
module.exports = {
output: {
path: path.resolve('./dist'),
filename: "[name].dev.[hash:2].js"
}
};

webpack.prod.config.js

  • (以output举例)
const path = require('path');
module.exports = {
output: {
path: path.resolve('./dist'),
filename: "[name].prod.[hash:8].js"
}
};

base.js

  • 配置文件中的webpack.DefinePlugin定义的变量(__isDevelopment__),在入口文件和入口文件引用的其他文件中都可以获取到__isDevelopment__的值
let env = null;
if (__isDevelopment__) {
env = 'dev';
} else {
env = 'prod';
}
module.exports = env;

index.js

let env = require('./base.js');
if (__isDevelopment__) {
console.log('dev');
} else {
console.log('prod');
}
console.log('env', env); /*
prod
env prod
*/

3 note

webpack.DefinePlugin

定义环境变量的值时用 JSON.stringify 包裹字符串的原因是环境变量的值需要是一个由双引号包裹的字符串,而 JSON.stringify('production')的值正好等于'"production"'

七 CDN

CDN 又叫内容分发网络,通过把资源部署到世界各地,用户在访问时按照就近原则从离用户最近的服务器获取资源,从而加速资源的获取速度。

  • HTML文件不缓存,放在自己的服务器上,关闭自己服务器的缓存,静态资源的URL变成指向CDN服务器的地址
  • 静态的JavaScript、CSS、图片等文件开启CDN和缓存,并且文件名带上HASH值
  • 为了并行加载不阻塞,把不同的静态资源分配到不同的CDN服务器上

八 Tree Shaking

1 action

tree Shaking 可以用来剔除JavaScript中用不上的死代码。

2 useage

  • 它依赖静态的ES6模块化语法,例如通过import和export导入导出
  • 不要编译ES6模块
use: {
loader: 'babel-loader',
query: {
presets: [
[
"env", {
modules: false //含义是关闭 Babel 的模块转换功能,保留原本的 ES6 模块化语法
}
],
"react"
]
}
},

3 note

需要注意的是它依赖静态的ES6模块化语法,例如通过import和export导入导出。也就是说如果项目代码运行在不支持es6语法的环境上,Tree Shaking也就没有意义了。

九 提取公共代码

1 为什么需要提取公共代码

大网站有多个页面,每个页面由于采用相同技术栈和样式代码,会包含很多公共代码,如果都包含进来会有问题

相同的资源被重复的加载,浪费用户的流量和服务器的成本;

每个页面需要加载的资源太大,导致网页首屏加载缓慢,影响用户体验。 如果能把公共代码抽离成单独文件进行加载能进行优化,可以减少网络传输流量,降低服务器成本

2 如何提取

1) 分类

不同类型的文件,打包后的代码块也不同:

  • 基础类库,方便长期缓存
  • 页面之间的公用代码
  • 各个页面单独生成文件

2) usage

webpack.config.js

 optimization: {
splitChunks: {
cacheGroups: {
commons: {// 页面之间的公用代码
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0 // This is example is too small to create commons chunks
},
vendor: {// 基础类库
chunks: 'initial',
test: /node_modules/,
name: "vendor",
priority: 10,
enforce: true
}
}
}
},

./src/pageA.js

require('./utils/utility1.js');
require('./utils/utility2.js');
require('react');

./src/pageB.js

require('./utils/utility2.js');
require('./utils/utility3.js');

./src/pageC.js

require('./utils/utility2.js');
require('./utils/utility3.js');

utils/utility1.js

module.exports = 1;

utils/utility2.js

module.exports = 2;

utils/utility3.js

module.exports = 3;

打包后的结果

上述三种代码的生成的结果,如下图:

十 Scope Hoisting

1 action

Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快, 它又译作 "作用域提升",是在 Webpack3 中新推出的功能。

  • 代码体积更小,因为函数申明语句会产生大量代码
  • 代码在运行时因为创建的函数作用域更少了,内存开销也随之变小 hello.js

2 useage

package.json

 "build": "webpack  --display-optimization-bailout --mode development",

webpack.config.js

plugins: [
new ModuleConcatenationPlugin()
],

./h.js

export default 'scope hoist'

./index.js

import str from './h.js'
console.log(str);

3 note

必须使用ES6语法,否则不起作用(--display-optimization-bailout 参数会提示)

十一 代码分离

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。 有三种常用的代码分离方法:

  • 入口起点:使用 entry 配置手动地分离代码。
  • 防止重复:使用 splitChunks 去重和分离 chunk。
  • 动态导入:通过模块的内联函数调用来分离代码。

入口起点和防止重复上面已经提到了,下面我们重点讲一下动态导入

1 action

用户当前需要用什么功能就只加载这个功能对应的代码,也就是所谓的按需加载 在给单页应用做按需加载优化时,一般采用以下原则:

  • 对网站功能进行划分,每一类一个chunk
  • 对于首次打开页面需要的功能直接加载,尽快展示给用户
  • 某些依赖大量代码的功能点可以按需加载
  • 被分割出去的代码需要一个按需加载的时机

2 usage

  • 使用import(module)的语法
  • import 异步 加载 模块是一个es7的语法
  • 在webpack里import是一个天然的分割点
document.getElementById('play').addEventListener('click',function(){
import('./vedio.js').then(function(video){
let name = video.getName();
console.log(name);
});
});

参考文档

webpack4 优化记录的更多相关文章

  1. VS2010/2012配置优化记录笔记

    VS2010/2012配置优化记录笔记 在某些情况下VS2010/2012运行真的实在是太卡了,有什么办法可以提高速度吗?下面介绍几个优化策略,感兴趣的朋友可以参考下,希望可以帮助到你   有的时候V ...

  2. React性能优化记录(不定期更新)

    React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...

  3. Loogn.OrmLite映射优化记录

    大家对ORM效率的争议多半在映射性能方面.自己的ORMLite也是如此,经过前段时间的折腾,已经找不出一个简单的方法再提升一下这部分的方法了.在此把优化涉及的几点记录一下. 注:用于性能测试的Code ...

  4. 我的搜索优化记录(一):中文分词优化IK Analyzer

    搜索绝对不仅仅是搭起框架,跑出结果就完成的工作,之后分词.排序等等的优化才是重头戏. 先交代下背景:这个搜索是我一个人负责搭建并优化的项目,主要索引对象为歌曲.歌手MV等等. 使用技术:Lucene. ...

  5. ElasticSearch CPU和内存占用高的优化记录

    公司最近使用ElasticSearch作为数据报表汇总引擎.上线三个月累计数据800万,但是今天突然大面积出现查询超时,上服务器查看服务运行情况,发现cpu使用率高达300% mem 使用率也到了90 ...

  6. mysql参数优化记录

    服务器参数16G内存,4核CPUvim /etc/my.cnf 原: back_log=170 max_connections=600 max_user_connections=0 thread_co ...

  7. Unity Ulua1.03优化记录

    现在项目的框架是在2015年设计的,那时候Ulua还处于1.03版本,现在回头再看,Ulua已经迭代到1.25版本,中间引入带有wraper的cstolua,而后转向现有的toLua#版本. 随着版本 ...

  8. 【mysql】索引优化记录

    基础知识 Innodb存储引擎 支持行锁 支持事务: Myisam存储引擎 只支持表锁: 不支持事务: 常见索引列表 独立的列 前缀索引(索引选择性) 多列索引(并不是多个单列索引,索引顺序很重要) ...

  9. Linux内核参数优化记录

    //fs.file-max 最大打开文件数 //fs.nr_open=20480000 单个进程允许打开的文件句柄上限 //信号量及共享内存,可以使用ipcs -l来获取 //kernel.sem 信 ...

随机推荐

  1. 制作CentOS fence-agents 镜像

    1, Download centos7 iso file: Centos7 ISO download: http://buildlogs.centos.org/rolling/7/isos/x86_6 ...

  2. 每天一个linux命令:Linux 目录结构

    对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统至关只要,下面 ...

  3. c# 正则实践

    Regex reg = new Regex(@"<img[\s]+src[\s]*=[\s]*['""](?<picPath>.*)['"&q ...

  4. 没有公网的IP的用户有福了,即使您没有公网IP,我们要一样可以让您与ER对接,同时可远程访问

    EasyRadius从7.10起,开始向使用者平摊使用费用,即服务器托管费用.维护费用,向用户征收少量费用.即300元/年/1000用户,600元/年/无限制用户. 按比较高的费用1000用户计费,即 ...

  5. Java 利用POI操作PPT

    解析PPT文件中的图片 import java.io.File; import java.io.FileOutputStream; import org.apache.poi.hslf.HSLFSli ...

  6. springboot+mybatis集成多数据源MySQL/Oracle/SqlServer

    日常开发中可能时常会遇到一些这样的需求,业务数据库和第三方数据库,两个或多个数据库属于不同数据库厂商,这时候就需要通过配置来实现对数据库实现多源处理.大致说一下我的业务场景,框架本身是配置的sprin ...

  7. CSS 文本缩进,行间距

    文本缩进:text-indent:2.0em; 行间距:line-height:1.5em;

  8. hibernate 之 sql查询

    如果用hibernate执行原生sql进行数据查询可以调用 SQLQuery query = getSession().createSQLQuery(sql); 然后再执行 query.list() ...

  9. 【转】 Android定时器

    转载自:http://www.android-study.com/pingtaikaifa/508.html 在Android开发中,定时器一般有以下3种实现方法: 一.采用Handler与线程的sl ...

  10. python中安装dlib和cv2

    这两个模块是很容易出问题的模块,以下的解决办法都是从网上收集而来. 安装dlib: pypi.python.org/pypi/dlib/19.6.0 下载 dlib-19.6.0-cp36-cp36m ...