webpack ensure相信大家都聽過，有人稱它為異步加載，也有人說做代碼切割，那這個家伙到底是用來干嘛的？其實說白了，它就是把js模塊給獨立匯出一個.js檔案的，然后使用這個模塊的時候，webpack會構造script dom元素，由瀏覽器發起異步請求這個js檔案，
這樣解決整個專案打包成同一個非常大js、css，首屏加載慢，其實和我們加載百度統計代碼類似， 把一些js模塊給獨立出一個個js檔案，然后需要用到的時候，在創建一個script物件，加入到document.head物件中即可，瀏覽器會自動幫我們發起請求，去請求這個js檔案，在寫個回呼，去定義得到這個js檔案后，需要做什么業務邏輯操作，
什么是懶加載
懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載，
當頁面中一個檔案過大并且還不一定用到的時候，我們希望在使用到的時才開始加載，這就是按需加載，要實作按需加載，我們一般想到的方法：動態創建script標簽，并將src屬性指向對應的檔案路徑，
為什么需要懶加載
在單頁應用中，如果沒有應用懶加載，運用webpack打包后的檔案將會例外的大，造成進入首頁時，需要加載的內容過多，延時過長，不利于用戶體驗，而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載時間，
實作程序中存在的問題：
-
怎么保證相同的檔案只加載一次？
-
怎么判斷檔案加載完成？
-
檔案加載完成后，怎么通知所有引入檔案的地方？
webpcak 的按需加載已經完美解決了上述問題，但如何與webpack配合實作組件懶加載？
如何與webpack配合實作組件懶加載
webpack chunk 流
webpack組態檔中的output路徑配置chunkFilename屬性
output: {
path: resolve(__dirname, 'dist'),
filename: '[name].js?[chunkhash]',
chunkFilename: '[name].js?[hash:5]',
publicPath: '/assets/'
},
chunkFilename路徑將會作為組件懶加載的路徑
webpack支持的異步加載方法
System.import()；
已廢除，不推薦——webpack2官網上已經宣告將逐漸廢除
() => system.import(URL)
() => import(URL)
需要webpack > 2.4，v1不支持——webpack2官網推薦使，官方檔案webpack中使用import(), 屬于es7范疇,
require是由webpack社區提供方案，import為es官方提供；
如果遇到使用import 報錯，需要安裝babelrc， 需要配合babel的syntax-dynamic-import插件使用, 具體使用方法如下
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
webpack babel-loader 需要配置
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]
使用如下
//匯入整個模塊
import('./component').then(Component => /* ... */);
//使用await
async function determineDate() {
const moment = await import('moment');
return moment().format('LLLL');
}
determineDate().then(str => console.log(str));
vue-router配置路由：vue官方檔案：路由懶加載(使用import())
{
path: '/',
component: () => import('../pages/home.vue'),
meta: {
title: 'home'
}}
require.ensure
require.ensure([…modules],()=>{}[,errorCallBack[,chunkName]]);
v1和v2均可使用
require.ensure([], function() {
var module = require('../../jsLib/module');
//do something
})
require方式可以將多個模塊js組合分割打包，
require下面方法ensure第一個引數是依賴，如果不需要請寫[]（空陣列）
而import只能將每個模塊獨立打包成一個js檔案；
也就是說，如果現在有三個導航A、B、C，你現在用require可以將A單獨分割出來做懶加載，進入a模塊只請求A，B和C你可以組合在一起進行分割，進入B和C將加載共同一個檔案；
component: resolve => require(['../pages/home.vue'], resolve)
vue-router配置路由，使用webpack的require.ensure技術，也可以實作按需加載，
{
// 進行路由配置,規定'/'引入到home組件
path: '/',
component: resolve => require(['../pages/home.vue'], resolve),
meta: {
title: 'home'
}}
這是異步加載組件，當你訪問 / ，才會加載 home.vue，
對于vue的路由組態檔(routers.js)
-
用import引入的話，當專案打包時路由里的所有component都會打包在一個js中，造成進入首頁時，需要加載的內容過多，時間相對比較長，
-
當用require這種方式引入的時候，會將你的component分別打包成不同的js，加載的時候也是按需加載，只用訪問這個路由網址時才會加載這個js，
你可以打包的時候看看目錄結構就明白了，
-
require: 運行時呼叫，理論上可以運用在代碼的任何地方，
import：編譯時呼叫，必須放在檔案開頭
router中實作懶加載
vue的單頁面（SPA）專案,必然涉及路由按需的問題
路由中配置異步組件
export default new Router({
routes: [
{
mode: 'history',
path: '/my',
name: 'my',
component: resolve =>require(['../page/my/my.vue'], resolve),//懶加載
},
]
})
實體中配置異步組件
components: {
historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載
//historyTab: () => import('../../component/historyTab/historyTab.vue')
},
全域注冊異步組件
Vue.component('mideaHeader', () => {
System.import('./component/header/header.vue')
})
關于webpack異步加載的問題
-
多次進出同一個異步加載頁面是否會造成多次加載組件？在多個地方使用同一個異步組件時是否造成多次加載組件？
否，首次需要用到組件時瀏覽器會發送請求加載組件，加載完將會快取起來，以供之后再次用到該組件時呼叫
-
如果在兩個異步加載的頁面中分別同步與異步加載同一個組件時是否會造成資源重用？
會, 將會造成資源重用, 根據打包后輸出的結果來看, a頁面中會嵌入historyTab組件的代碼, b頁面中的historyTab組件還是采用異步加載的方式, 另外打包chunk；在協同開發的時候全部人都使用異步加載組件
-
在異步加載頁面中載嵌入異步加載的組件時對頁面是否會有渲染延時影響？
會， 異步加載的組件將會比頁面中其他元素滯后出現， 頁面會有瞬間閃跳影響；因為在首次加載組件的時候會有加載時間， 出現頁面滯后， 所以需要合理的進行頁面結構設計， 避免首次出現跳閃現象；
只要文章：
VUE2組件懶加載淺析 https://www.cnblogs.com/zhanyishu/p/6587571.html
決議 Webpack中import、require、按需加載的執行程序 https://segmentfault.com/a/1190000013630936
揭秘webpack按需加載原理 https://zhuanlan.zhihu.com/p/159216534
vue專案實作按需加載的3種方式：vue異步組件、es提案的import()、webpack的require.ensure() https://segmentfault.com/a/1190000011519350
https://webpack.js.org/guides/code-splitting/
轉載本站文章《webpack性能優化(1):分隔/分包/異步加載+組件與路由懶加載》,
請注明出處：https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8384.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547399.html
標籤：其他
上一篇：前端設計模式——原型模式
下一篇：前端設計模式——原型模式