专栏首页京程一灯Webpack5.0 新特性尝鲜实战 ?? [每日前端夜话0x37]

Webpack5.0 新特性尝鲜实战 ?? [每日前端夜话0x37]

每日前端夜话0x37

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:4733 字

预计阅读时间: 12 分钟

在老袁写这篇文章的时候,v5版本仍然处于早期阶段,可能仍然有问题。而且作为一个major版本,其中有一些breaking changes,可能会导致一些配置和插件不工作。但这并无妨碍我们去开始对changelog上的新特性进行尝鲜实战。大家如果遇到什么问题可以移步到这【https://github.com/webpack/webpack/issues/8537】进行反馈。另外有关于Webpack4的配置和Compiler->Compilation->Chunk->Module->Template整体运行原理国内外有很多优秀的文章我这里就不一一展开了。接下来天也不早了人也不少了,让我们一起干点正事。

(本图截自twitter列出了接下来v5版本的改进,嗯…感觉屏幕还是小了一点)

(本图截自github,截图时间为3月12日。我们看到目前开发进度到了57%)

一顿操作猛如虎指南

  • 升级你的Node到8(V5将Node.js版本从6升级到了8)
  • npm install webpack@next —save-dev
  • npm install webpack-cli —save-dev
  • package.json添加 "dev": "webpack --mode development"
  • package.json 添加 "prod": "webpack --mode production"

开始Webpack V5尝鲜之旅

新建src文件夹,然后新建index.js。简单的写了一句 console.log("Hello Webpack5")

1. dist打包文件测评

1#激动的心 颤抖的手
2npm run dev

我的内心毫无波澜……卒?…好了,到这里结束了。散了吧~

3个小时以后…我依旧心不死 发现了这个issues【https://github.com/webpack/webpack-cli/issues/762】解决。让我们一起看看运行成功之后V5和V4的对比图

V5打包到dist的main.js

cmd-markdown-logo V4打包到dist的main.js

V5打包过程

V5打包过程

V4打包过程

V4打包过程

没有文化的我只能说一句,哎呀我去!!体积小了一半之多,而且那个startup函数简直骚气的一批?

2. 让人揪心的按需加载

以前当我们想在index.js内部 import(./async.js").then(...)的时候,如果我们什么也不加。V4会默认对这些文件生成一堆0.js,1.js,2.js…是多么的整齐.所以我们需要使用 import(/* webpackChunkName: "name" */ "module") 才能化解这份尴尬。今天V5可以在开发模式中启用了一个新命名的块 id 算法,该算法提供块(以及文件名)可读的引用。 模块 ID 由其相对于上下文的路径确定。 块 ID 是由块的内容决定的,所以你不再需要使用Magic Comments。

1//src文件夹index.js
2import("./async.js").then((_)=>{
3    console.log(_.data);
4})
5console.log("Hello Webpack5")
1//src文件夹async.js
2const data = "异步数据?";
3export default data; 

再次编译之后src_async_js.js 就躺在了dist里?。如果这个时候去执行 npm run prod 会在dist里出现一个已数字开头的js文件。比如我的是61.js,你可能非常好奇,这是什么鬼❓

3. moduleIds & chunkIds得已确定

首先我们改造一下上面的文件。

1//src文件夹index.js
2import("./async.js").then((_) => {
3    console.log(_.data);
4})
5import("./async2.js").then((_) => {
6    console.log(_.data2);
7})
8console.log("Hello Webpack5")
1//src文件夹async2.js
2import common from "./common.js"
3console.log(common)
4const data2 = "异步数据?";
5export default data2;

在V4的版本中async.js、async2.js会被一次分配给一个chunkId。然后生成的main.js根据chunkId加载对应的文件,但是悲剧的事如果此时我删掉import("./async.js").then(() => {console.log(.data);})这一行的话会导致async2进行上位也就是原来的1变成了0。如下图:

利用BeyondCompare我们也清晰的看到了main的变化。

有同学说这还不好办,我又可以用Magic Comments、也可以用一些插件就可以固定住他的 moduleIds & chunkIds。是的你说的没错,但是V5将不需要引入任何的外力,如上我们遇到prod陌生的带数字的JS,就是为了增强long-term caching,增加了新的算法,并在生产模式下使用以下配置开启。这些算法以确定性的方式为模块和数据块分配非常短(3或4个字符)的数字 id。

 1//Webpack4生产环境的默认配置
 2module.exports = {
 3    optimization:{
 4         chunkIds: "deterministic”,
 5        moduleIds: "deterministic"   
 6    }
 7}
 8//Webpack4生产环境的默认配置
 9module.exports = {
10    optimization:{
11         chunkIds: "natural”,
12        moduleIds: "size"   
13    }
14}

如果你觉得这些新特性让你不爽,你依旧可以设置 optimization: { chunkIds: 'named' } 它是兼容的,这一点还是值得点赞的。

4. 饱受诟病的编译速度

Webpack的编译速度相信是很多同学比较头痛的问题,当然我们也有很多优化的办法。比如HappyPack、Cache-loader、排除node_modules、多线程压缩甚至可以采用分布式编译等等。其实Webpack编译慢还跟他的laoder机制不无关系,比如string->ast->string这一点跟Parcel确实有些差距 ?。那在V5的版本中都带来些哪些改变呢?其实你只要在配置文件中加上这样一句:

1module.exports = {
2    cache: {
3        type: "filesystem"
4    }
5}

其实cache在V4版本中就有cache,不过如上这个配置官网上也在说是一个实验性的,也说如果当使用持久缓存时,不再需要cache-loader。 对于 babel cacheDirectory 等也是如此。老袁太忙也没有时间详细的翻所有的pr和源码,不过大致运行了下貌似有的效果?如果哪位大神这里有空翻过了源码也欢迎在评论区讨论?

(开启缓存之后的编译速度)

5. minSize&maxSize 更好的方式表达

在V4版本中默认情况下,仅能处理javascript的大小?

 1module.exports = {
 2    optimization: {
 3        splitChunks: {
 4            cacheGroups: {
 5                commons: {
 6                    chunks: "all",
 7                    name: "commons",
 8                    minChunks: 1,
 9                    minSize: "数值",
10                    maxSize: "数值"
11                }
12            }
13        }
14    }
15}

V5版本的变更,这个变更简直是太皮了? 老袁已经试过了,效果还是蛮不错的。

 1module.exports = {
 2    optimization: {
 3        splitChunks: {
 4            cacheGroups: {
 5                commons: {
 6                    chunks: "all",
 7                    name: "commons",
 8                }
 9            },
10            //最小的文件大小 超过之后将不予打包
11            minSize: {
12                javascript: 0,
13                style: 0,
14            },
15            //最大的文件 超过之后继续拆分
16            maxSize: {
17                javascript: 1, //故意写小的效果更明显
18                style: 3000,
19            }
20        }
21    }
22}

7.编译器的优化

如果大家读过Webpack的源码一定知道Compiler的重要性,在Webpack中充斥着大量的钩子和触发事件。

在新的版本中,编译器在使用完毕后应该被关闭,因为它们在进入或退出空闲状态时,拥有这些状态的 hook。 插件可以用这些 hook 来执行不太重要的工作(比如:持久性缓存把缓存慢慢地存储到磁盘上)。同时插件的作者应该预见到某些用户可能会忘记关闭编译器,所以 当编译器关闭所有剩下的工作时应尽快完成。 然后回调将会通知已彻底完成。 当你升级到 v5 时,请确保在完成工作后使用 Node.js API 调用 Compiler.close。

8. Node.js polyfills 自动被移除

过去,Webpack 4版本附带了大多数 Node.js 核心模块的 polyfills,一旦前端使用了任何核心模块,这些模块就会自动应用,但是其实有些是不必要的。 V5中的尝试是自动停止 polyfilling 这些核心模块,并侧重于前端兼容的模块。当迁移到 v5时,最好尽可能使用前端兼容的模块,并尽可能手动添加核心模块的polyfills。 Webpack鼓励大家多提交自己的意见,因为这个更改可能会也可能不会进入最终的 v5版本。现在微前端已经在很多国内的团队大量应用,老袁个人觉得这个改动对于前端更专注开发模块更有益处。


在本文开头的时候,我们列出了一张作者演讲的图有关于Webpack的改动。大家可以点击这里【https://github.com/webpack/changelog-v5/blob/master/README.md】看到全部。新的版本变动必将引起很多插件会出问题,但是V5的性能改进是我们更加期待的。最后我想说天下武功出少林,天下技术出基础。大家夯实基础多悟原理才能跟的上变化如此快的前端娱乐圈。

老袁从业8年,几年前侥幸进入百度和腾讯,后来在阿里offer和创业之间选择了创业,更侥幸在27岁那年拿到了月薪30K+。

以下是我总结的前端技术图谱,包含十大前端必会模块,可做参考

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:志佳老师

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webpack快速上手指南

    Webpack用于编译JavaScript模块。安装以后,可以通过CLI或API使用它。如果你对webpack还有点陌生,可以先看看它的核心概念以及一些比较,了...

    疯狂的技术宅
  • three.js 新手指南

    在这个分步指南中,我们将使用一个基于 WebGL 的 3D 图形的框架 three.js, 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者...

    疯狂的技术宅
  • 用 TypeScript 开发 Node.js 程序[每日前端夜话0x5E]

    翻译:疯狂的技术宅 原文:https://medium.com/@freek_mencke/how-to-write-node-js-applications-...

    疯狂的技术宅
  • 腾讯云独家详解小程序多人视频通话

    在微信小程序中搜索 腾讯视频云 可以加载到我们的演示用小程序,其中 多人音视频 功能可用于体验和测试多人音视频通话功能。出于 UI 美观和画面大小的考虑,Dem...

    腾讯视频云终端团队
  • 对于零基础同学来讲,javascript有多难掌握?

    你是零基础,那么你用什么方式,可以快速的实现js的运用自如呢? Javascript是一门脚本语言,它没有复杂的内存管理,只有一个进程,变量随便什么都可以储存...

    web前端教室
  • JavaScript常用对象&属性&事件-图标

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 利用js文件反弹shell

    前两天在freebuf上看到一个利用Ink文件触发攻击链的文章,确实佩服作者的脑洞。

    洛米唯熊
  • 前端缓存

    https://juejin.im/post/5a098b5bf265da431a42b227

    城市中的游牧民族
  • Webpack第三天

    我们已经能打包能启动了,现在我们要继续开发。开发的时候我们要一直刷新才能出现,这很浪费时间,而webpack自带了热更新。

    wade
  • smartClient 1--框架介绍

        快速构建 大型企业应用开发(无需过多关注UI),适合基于云技术的应用,主要关注业务的发展和营销,加快开发进程

    用户1148399

扫码关注云+社区

领取腾讯云代金券