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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
浅谈JavaScript中this的指向更改
Jul 28 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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 简单日历实现代码
2009/10/28 PHP
php 代码优化之经典示例
2011/03/24 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
js实现左右轮播图
2020/01/09 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
一套.net面试题及答案
2016/11/02 面试题
什么是GWT的Module
2013/01/20 面试题
装修设计师求职信
2014/02/26 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
内衣营销方案
2014/03/15 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
好听的队名和口号
2014/06/09 职场文书
篮球比赛口号
2014/06/10 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
简历自荐信范文
2015/03/09 职场文书
催款律师函范文
2015/05/27 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书