Webpack 懒加载

最新推荐文章于 2025-02-24 17:02:43 发布

Rui012345

最新推荐文章于 2025-02-24 17:02:43 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： webpack

本文链接：https://blog.youkuaiyun.com/qq_27855219/article/details/94132349

版权

前端专栏收录该内容

28 篇文章

订阅专栏

Webpack 的懒加载（按需加载）是优化网页和应用的重要方式，它通过将代码分割，在需要时才加载，加快初始加载速度，减少总体体积。通过在事件处理中动态导入，如点击按钮时加载print.js，结合webpack配置如chunkFilename，可以实现资源的按需加载，提升性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方解释：懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

通俗来说就是，如果每次加载页面的时候都会某些代码块，会重复的请求，造成资源的浪费，影响网站性能。所以提出了懒加载的解决办法：按需加载，初始化不需要加载此代码块，等到具体的执行需要时候，再加载，从而优化性能。

例如：在点击按钮的事件处理中，才需要用到来自print.js的print函数。所以可以将代码写成点击时候触发加载print.js。

index.js中click事件处代码：

 button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
     var print = module.default;
     print();
   });

import print.js 的时候加上注释 /* webpackChunkName: "print" */可以保证打包后的js文件名为print.bundle.js而非1.bundle.js。

webpack.config.js中

chunkFilename:'[name].bundle.js',//决定非入口chunk的名称，动态导入分离代码

完整版：

index.js

 import _ from 'lodash';
 function component() {
   var element = document.createElement('div');
   var button = document.createElement('button');
   var br = document.createElement('br');

   button.innerHTML = 'Click me and look at the console!';
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   element.appendChild(br);
   element.appendChild(button);
   
   button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
     var print = module.default;
     print();
   });

    return element;
  }
  
document.body.appendChild(component());

print.js

console.log('The print.js module has loaded! See the network tab in dev tools...');

export default () => {
  console.log('Button Clicked: Here\'s "some text"!');
};

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
	entry:{
		index:"./src/index.js",
	},
	output:{
		filename:'[name].bundle.js',
		chunkFilename:'[name].bundle.js',//决定非入口chunk的名称
		path:path.resolve(__dirname,'dist')
	},
	plugins:[
	new CleanWebpackPlugin(),
	new HTMLWebpackPlugin({title:"Code Spliting"})//自动将html和output的js关联
    ]
};