本文介紹了webpack學習筆記之代碼分割和按需加載的實例詳解,分享給大家,也給自己留個筆記
為什么需要代碼分割和按需加載
代碼分割就是我們根據實際業務需求將代碼進行分割,然后在合適的時候在將其加載進入文檔中。
舉個簡單的例子:
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(!_clickEvent){ console.log(_click); var _clickEvent=_click._clicks; } new _clickEvent(); },'cli') });};
webpack將一切視為模塊,CSS,js,html,JSX等等。
var _cs=require('./index.css');
引入對應的css模塊。這就需要我們安裝css-loder和style-loader。