webpack学习笔记（代码分割，按需加载）

最新推荐文章于 2024-07-28 00:56:04 发布

请不要让我脱发

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量2.1w

点赞数 2

分类专栏：学习笔记

本文链接：https://blog.csdn.net/yangyiboshigou/article/details/68928353

版权

本文介绍了webpack的代码分割和按需加载的概念，通过一个简单的例子展示如何实现按需加载组件。通过require.ensure进行代码分片，打包后生成独立的chunk文件，并讨论了如何避免重复打包和优化文件命名。此外，还提到了配置文件中的filename和chunkFilename选项，以及使用html-loader的注意事项。

摘要由CSDN通过智能技术生成

为什么需要代码分割和按需加载

代码分割就是我们根据实际业务需求将代码进行分割，然后在合适的时候在将其加载进入文档中。
举个简单的例子：
1.一个HTML中存在一个按钮
2.点击按钮出现一个包着图片的div
3.点击关闭按钮图片消失

Demo目录：
这里写图片描述

一.当未点击按钮时浏览器只加载了对入口文件打包后的JS
这里写图片描述

二.点击按钮会对组件进行异步加载
这里写图片描述
这个clichunk就是我们打包好的click组件，包括相应的JS逻辑html和css

例子源码记录

1.编辑入口文件

window.onload=function(){
   
         var _cs=require('./index.css');
         var $=require('jquery');

         $('#_click').on('click',function(){
   
              require.ensure([],function(require){
   
                  var _click=require('./_clickWindow.js');
                  if(!_