webpack 代码分离优化快速指北


Posted in Javascript onMay 18, 2019

分离代码文件

在此之前,首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别;简单来说在 entry 定义的入口文件走的就是 filename 配置项,在入口文件内部引入的通常情况下是 chunk,走 chunkFilename 的配置

所以很多时候分离代码文件就是将不同的 chunk 分离开来,生产环境中有利于浏览器缓存,加快二次访问的速度

代码分离的时候,optimization 中配置的 splitChunks 默认就是 async,默认对异步代码进行分离;所以通常情况下能用异步的用异步 import;配合 prefetching 和 preloading 能够产生很好的效果

filename 和 chunkFilename 的区别

output: {
 filename: '[name].js',
 chunkFilename: '[name].chunk.js'
}

举个例子

如果入口文件是 main.js

那么打包后生成的文件是 main.js

如果 main.js 中引入了其他模块,比如引入了 lodash 那么可能会生成一个名为 lodash.chunk.js 文件

基本概念了解了,接下来开始对 js 和 css 文件进行分离的操作:

js 代码分离

js 代码的分离操作,首先要考虑的就是对异步代码的分离。这里使用 dynamicImport

dynamicImport

可以使用 magic comment 来修改动态 import 导出的 chunkname,语法规则如下:

import('/* webpackChunkName: "lodash" */' 'lodash').then(//...)

如果需要使用这种注释的写法,应该安装模块 @babel/plugin-syntax-dynamic-import,并在 babelrc 中引入这个插件,使用方法很简单这里不多说了

splitChunks

splitChunk 的相关配置参数

建议将公共使用的第三方类库显式地配置为公共的部分,而不是 webpack 自己去判断处理

  • chunks: 表示显示块的范围,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为all;
  • minSize: 表示在压缩前的最小模块大小,默认为0;
  • minChunks: 表示被引用次数,默认为1;
  • maxAsyncRequests: 最大的按需(异步)加载次数,默认为1;
  • maxInitialRequests: 最大的初始化加载次数,默认为1;
  • name: 拆分出来块的名字(Chunk Names),默认由块名和hash值自动生成;
  • cacheGroups: 缓存组。

缓存组中还有其他几个参数:

  • priority: 表示缓存的优先级;
  • test: 缓存组的规则,表示符合条件的的放入当前缓存组,值可以是function、boolean、string、RegExp,默认为空;
  • reuseExistingChunk: 表示可以使用已经存在的块,即如果满足条件的块已经存在就使用已有的,不再创建一个新的块。
module.exports = {
 entry: {
 vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方类库
 },
 optimization: {
 splitChunks: {
  cacheGroups: {
  vendor: {
   chunks: "initial",
   test: "vendor",
   name: "vendor", // 使用 vendor 入口作为公共部分
   enforce: true,
  },
  },
 },
 },
 // ... 其他配置
}

或者:

optimization: {
 splitChunks: {
  name: true, // 自动处理文件名
  chunks: 'all',
  minChunks: 1, // 至少 import 1 次的即需要打包
  automaticNameDelimiter: '-',
  cacheGroups: {
  vendors: {
   test: /axios|lodash/, // 将这两个第三方模块单独提取打包
   chunks: 'initial',
  }
  }
 }
 },

optimization-splitchunks

chunks 的配置

注意 ⚠️

如果是动态 import,import('/* webpackChunkName: "lodash" */' 'lodash').then() 那么 splitChunks 设置为 async,代码分离将会起作用。

如果是同步加载 import, import _ from 'lodash' 那么 splitChunks 设置为 async 将不起作用,如果设置为 all,那么还需要配置 cacheGroups

cacheGroups 的配置

vendors 缓存组的配置可以检测第三方模块是否在 node_modules 中,如果存在则该 splitChunks 生效,将会分离到 vendors~... 这样的文件中

配置 filename 则会打包成 [filename] 命名的文件中

runtimeChunk 的作用

这个 runtimeChunk 实际上就是链接业务逻辑和第三方类库之间的关系的 manifest。需要将其提取出来,否则使用 contenthash 的情况下有可能会导致模块内容没发生改变的情况下出现 contenthash 多次打包出现不一致的情况(实际上就是存在在业务逻辑和模块中的 manifest 发生了改变)

// v4版本的 webpack 不用配置,但最好也提取出来
optimization: {
 runtimeChunk: {
 name: 'runtime'
 }
}

reuseExistingChunk:

如果 a 模块使用了 b,b 模块又使用了 a;a 被打包到 common.js 中,打包 b 时将直接使用已经打包好的 common.js 中的 a;这就是 reuseExistingChunk 的作用:

default: {
 reuseExistingChunk: true,
 filename: 'common.js'
}

他的含义就是只要其中一个模块使用了 import $ from 'jquery',其他文件中就可直接使用 $ 变量,webpack 会自动在打包过程中 import 这个模块

css 代码分离

css 部分分离代码文件 直接使用 extract-text-webpack-plugin 即可

一个 JS 文件,加载页面时虽然只需要加载一个 JS 文件,但代码一旦改变,用户访问新的页面时就需要重新加载一个新的 JS 文件。有些情况下,我们只是单独修改了样式,这样也要重新加载整个应用的 JS 文件,相当不划算。
多个组件共用一部分样式,如果分离开来,第二个页面就有了 CSS 文件的缓存,访问速度自然会加快

MiniCssExtractPlugin

新版本的 webpack 使用这个插件

注意,在引入样式文件 import './style.css' 的时候,如果配置了 treeshaking,应当在 package.json 中配置:

"sideEffects": [
 "*.css"
]

⚠️ 注意,另外在 vue 中如果有 style 标签,还需要在 sideEffects 中加入 *.vue 的配置项。不必担心 vue 中的 script 部分会被 treeShaking 掉。

插件的相关配置

filename 指的是如果该 css 文件会直接被插入 html 中那么走的就是 filename 的配置

plugins: [
 new MiniCssExtractPlugin({
 filename: '[name].css',
 chunkFilename: '[name].chunk.css'
 })
]

既然有分离那就有合并,这里顺便提及一下 css 代码合并

如果有多个入口,想把多个入口引入的样式文件全部打包到一个地方,那么可以使用 optimization 配置项的 splitChunks,所以这个配置项不仅仅只作用于 js,css 也是可以的:

optimization: {
 splitChuns: {
 cacheGroups: {
  styles: {
  name: 'style', // 将多个入口文件中的样式文件全部合并打包
  test: /\.css$/,
  chunks: 'all',
  enforce: true
  }
 }
 }
}

css 代码根据入口分别打包

还可以根据入口的不同,来分别打包 css 文件,文档已经讲的很详细了,这部分比较简单可以直接戳文档 https://webpack.js.org/plugins/mini-css-extract-plugin

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

Javascript 相关文章推荐
js去除重复字符串两种实现方法
Jan 09 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js运动应用实例解析
Dec 28 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
如何实现小程序tab栏下划线动画效果
May 18 #Javascript
微信小程序结合Storage实现搜索历史效果
May 18 #Javascript
Fetch超时设置与终止请求详解
May 18 #Javascript
微信小程序实现搜索历史功能
Mar 26 #Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 #Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 #Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 #Javascript
You might like
全国中波电台频率表
2020/03/11 无线电
建立文件交换功能的脚本(一)
2006/10/09 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
基于jquery & json的省市区联动代码
2012/06/26 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python中psutil的介绍与用法
2019/05/02 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
校长岗位职责
2013/11/26 职场文书
出国导师推荐信
2014/01/16 职场文书
倡议书格式模板
2014/05/13 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
聘任书的格式及模板
2019/10/28 职场文书