webpack4从0搭建组件库的实现


Posted in Javascript onNovember 29, 2020

代码分离

代码分离方法有三种:

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

动态导入(dynamic imports)

  • import()
  • require.ensure

预取/预加载模块(prefetch/preload module)

webpack v4.6.0+ 添加了预取和预加载的支持。

在声明 import 时,使用下面这些内置指令,可以让 webpack 输出 "resource hint(资源提示)",来告知浏览器:

  • prefetch(预取):将来某些导航下可能需要的资源
  • preload(预加载):当前导航下可能需要资源

配置项重点详解

(1)mode: "pruduction"
启用 minification(代码压缩) 和 tree shaking (usedExports:true)
自动指定DefinePlugin:process.env.NODE_ENV === 'production'

(2)devtool
source map 简介

生产环境:source-map
开发环境:inline-source-map

(3)optimization
splitChunks

splitChunks: {
 chunks: 'all', // 提取公共模块 loadash
 // 将第三方库(library)(例如 lodash 或 react)提取到单独的 vendor chunk 文件中,是比较推荐的做法
 // 利用 client 的长效缓存机制,命中缓存来消除请求,并减少向 server 获取资源,同时还能保证 client 代码和 server 代码版本一致。
 cacheGroups: {
  vendor: {
   test: /[\\/]node_modules[\\/]/,
   name: 'vendors',
   chunks: 'all'
  }
 }
},

runtimeChunk

runtimeChunk: 'single' // 提取引导模板 将 runtime 代码拆分为一个单独的 chunk

(5)output

// filename: '[name].[contenthash].js', // content hash 内容变化才会变化
filename: 'webpack-numbers.js', 
path: path.resolve(__dirname, 'dist'),

// 暴露 library 这是库名称 import from 'webpackNumbers'
library: 'webpackNumbers', 
libraryTarget: 'umd'

(6)plugins

HashedModuleIdsPlugin

const { HashedModuleIdsPlugin } = require('webpack');

plugins: [
  // 不会因模块增加和减少导致的模块内容变化,增加长缓存命中机制
  new HashedModuleIdsPlugin()
],

BundleAnalyzerPlugin

分析打包代码

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

plugins: [
  new BundleAnalyzerPlugin()
]

到此这篇关于webpack4从0搭建组件库的实现的文章就介绍到这了,更多相关webpack4搭建组件库内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 #Javascript
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
js实现扫雷源代码
Nov 27 #Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 #Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
JavaScript中的Proxy对象
Nov 27 #Javascript
详解JavaScript中的链式调用
Nov 27 #Javascript
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
使用js画图之饼图
2015/01/12 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python实现扫码工具的示例代码
2020/10/09 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
python实现简单区块链结构
2021/04/25 Python
Redis持久化与主从复制的实践
2021/04/27 Redis
不要在HTML中滥用div
2021/05/08 HTML / CSS
MySQL中日期型单行函数代码详解
2021/06/21 MySQL