webpack 中 CSS 和 JS 的按需加载
对于前端开发来说，webpack 是一个非常重要的工具。它可以将多个文件打包成一个文件，并且可以自动处理各种依赖关系。其中，webpack 还有一个非常重要的功能，那就是按需加载，特别是对于 CSS 和 JS 文件的按需加载，对于优化网站性能和用户体验来说是非常重要的。
什么是按需加载
按需加载就是在需要的时候才加载资源。在前端开发中，我们往往需要加载大量的 JS 和 CSS 文件，这些文件在页面加载时都会被请求一遍。如果这些文件很大，那么就会导致页面加载非常慢。这时候，我们就可以用按需加载的方法，只在需要的时候才加载这些文件，这样可以显著减少页面加载时间，提高用户体验。
CSS 的按需加载
在 webpack 中，我们可以使用 import() 方法来实现 CSS 的按需加载。首先，我们需要在 webpack 配置文件中添加 mini-css-extract-plugin 插件，并且设置 mini-css-extract-plugin 的 publicPath 配置项。
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------- -
----------- ----
--
-------- -
--- ----------------------
--------- --------------------
-------------- ------------------
---
--
-- ---
--然后，在需要按需加载 CSS 的地方，我们可以使用 import() 方法来加载 CSS 文件，如下所示：
import('./styles.css').then(() => {
// do something
});注意，使用 import() 方法来加载 CSS 文件的前提是需要在 webpack 配置文件中设置 CSS 的 loader。具体的配置可以参考如下代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ----------------------------
--
-------------
--
--
--
--
--JS 的按需加载
JS 的按需加载其实与 CSS 的按需加载类似。我们可以使用 import() 方法来实现 JS 的按需加载。
首先，在需要按需加载 JS 的地方，我们可以使用 import() 方法来加载 JS 文件，如下所示：
import('./index.js').then((module) => {
// do something
});然后，在 webpack 配置文件中设置 output 的 chunkFilename 配置项，例如：
module.exports = {
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js',
},
// ...
};这样，在打包时会自动生成多个 chunk 文件，这些 chunk 文件会在需要时按需加载。
总结
在 webpack 中，实现 CSS 和 JS 的按需加载是非常简单的。只需要在需要按需加载时使用 import() 方法，同时在 webpack 配置文件中设置相应的 loader 和插件即可。通过按需加载，我们可以大大减少页面加载时间，提高用户体验。
注：完整代码请参考 webpack-demo。
感谢您的阅读，希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480e91048841e9894065574