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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
浅谈js中对象的使用
Aug 11 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
学前端,css与javascript重难点浅析
Jun 11 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
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
vue中的scope使用详解
2017/10/29 Javascript
vue实现通讯录功能
2018/07/14 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
python3爬取数据至mysql的方法
2018/06/26 Python
python实现flappy bird小游戏
2018/12/24 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2014年纪检工作总结
2014/11/12 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
走近毛泽东观后感
2015/06/04 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python