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对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
数学专业推荐信范文
2013/11/21 职场文书
会议开场欢迎词
2014/01/15 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers