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异常捕获方法介绍
Apr 10 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
js数组常用最重要的方法
Feb 04 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 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
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python实现的系统实用log类实例
2015/06/30 Python
常见python正则用法的简单实例
2016/06/21 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
趣味活动策划方案
2014/02/08 职场文书
社会发展项目建议书
2014/08/25 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
爱护环境建议书
2015/09/14 职场文书
python 破解加密zip文件的密码
2021/04/22 Python