webpack的chunkFilename详细说明

简介: webpack的chunkFilename详细说明

你知道chunkFilename的作用吗?了解之前,先了解懒加载,动态导入的功能。

通常,一个网页会有自身的侧重点:

1、假如你在 YouTube 上加载一个视频页面,你更关心的肯定是视频而不是评论。所以,这里视频就比评论重要。

2、又比如你在一个新闻网站看一篇文章,你更关心的肯定是文章的文字而不是广告。所以,这里文字就比广告重要。

上面的这些情况,都可以通过优先下载最重要的部分,稍后懒加载剩余部分,从而来提升页面首次加载的性能。在 webpack 中,使用 import() 函数即可实现。

let btn = document.createElement('button')
btn.innerHTML = '按钮1'

btn.addEventListener('click', () => {
  import('./a').then(() => {
    console.log('加载完成')
  })
})

document.body.appendChild(btn)
AI 代码解读

import() 函数可以帮助你实现按需加载。Webpack 在打包时遇到 import,就会把这个模块放到单独的 chunk 中:

> npx webpack

asset bundle.js 13.3 KiB [emitted] (name: main)
asset src_a_js.bundle.js 860 bytes [emitted]
runtime modules 7.81 KiB 10 modules
cacheable modules 236 bytes
  ./src/index.js 209 bytes [built] [code generated]
  ./src/a.js 27 bytes [built] [code generated]
webpack 5.15.0 compiled successfully in 92 ms
AI 代码解读

只有当代码执行到 import() 函数时才会去下载。

这样可以让 入口 bundle 变得更小,从而减少首次加载时间。不仅如此,它还可以优化缓存,如果你修改了入口 chunk 的代码,注释 chunk 不会受到影响。

在开发模式下,webpack5 代码块 ID 默认启用了的新命名方式,算法为模块提供了人类可读的名称。 在生产模式下默认是数字的的形式。

比如在开发模式下文件是叫做 src_a_js.bundle.js 文件。在生产模式下是以 0.bundle.js 这样的形式。而 webpack4 在生产和开发都是数字形式的。

所以你不再需要使用 import(/* webpackChunkName: "name" */ "module") 来调试。 但如果你想控制生产环境的文件名,还是有意义的。

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'),
  chunkFilename: '[name].bundle.js'
},
AI 代码解读

通过注释改名字

import(/* webpackChunkName: "video" */ './a').then(() => {
  console.log('加载完成')
})
AI 代码解读
video.bundle.js
AI 代码解读

总结:webpack5 在开发环境下会自动命名代码块 ID 。

目录
打赏
0
0
0
0
2
分享
相关文章
一文带你了解和使用webpack(2024年11月)
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端已有两年半的时间,目前正努力向全栈开发迈进。如果你在我的博客中有所收获,欢迎关注我,我会持续更新更多优质内容。你的支持是我最大的动力!🎉🎉🎉
47 1
一文带你了解和使用webpack(2024年11月)
从了解到使用webpack
Webpack本质上是一种前端资源编译,打包工具
129 0
关于 Webpack 的介绍,什么是 Webpack?
Webpack 是一款现代化的前端构建工具,它可以将你的项目中的多个 JavaScript 模块打包成一个或多个 bundle 文件,同时还可以处理各种类型的静态资源,比如 CSS、图片等等。 Webpack 最初是由 Tobias Koppers 开发的,目前已经成为了前端开发中使用最广泛的构建工具之一。
171 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等